Display src in an iframe as datastring pdf doesn't work (React – jspdf)

by

I am trying to generate a PDF to show a receipt of an order when I have clicked a button. I am using jsPDF and React. I achieved to display the pdf when I call an external PDF, but when I pass the data as string, it show me the following error:

GET data:application/pdf;base64,
JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJ…
l6ZSAyMAovUm9vdCAxOSAwIFIKL0luZm8gMTggMCBSCj4+
CnN0YXJ0eHJlZgoxOTYzCiUlRU9G net::ERR_INVALID_URL

Is like the iframe recognize the SRC attribute as an URL and not as a PDF document. Here is the function that is called when I push the button:

handlePrintReceipt() {
  let pdfConverter = require('jspdf');
  let doc = new pdfConverter('p','pt','c6');

  doc.text('Simple text', 10, 10);
  let data = doc.output('datauristring');

  let iframe = `<iframe type="application/pdf" src="${data}#toolbar=0&navpanes=0" width="100%" height="450" frameborder="0"></iframe>`;

  this.setState({
    outputReceipt: iframe
  });
}

When I change the SRC attribute of the iframe with a simple PDF document that was save previously (like: ‘simple_text.pdf’), this implementation works fine.

What I am doing wrong? In advance thanks

24 thoughts on “Display src in an iframe as datastring pdf doesn't work (React – jspdf)”

Leave a Comment