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

Question

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

Answer 1

I just added your outputReceipt on a dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: this.state.outputReceipt}}/>

And works