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

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

  33. I think everything composed made a great deal of sense.
    However, think about this, suppose you typed a catchier post title?

    I mean, I don’t want to tell you how to run your blog, however suppose you added something that grabbed a person’s attention? I mean Display src in an iframe as datastring pdf doesn't work (React – jspdf) – JavaScript Help is kinda boring.

    You might glance at Yahoo’s front page and see how they write news titles to
    grab viewers to click. You might try adding a video or a related pic or two to get readers excited about everything’ve got to
    say. Just my opinion, it would bring your website a little livelier. http://herreramedical.org/vidalista

    Reply

  49. Hi there, I found your website by the use of Google at the same time as looking for a comparable subject, your web site got here up, it appears good.
    I have bookmarked it in my google bookmarks.
    Hi there, simply became alert to your weblog thru Google, and found that it’s
    really informative. I’m going to watch out for brussels.
    I’ll be grateful when you proceed this in future.
    Numerous other folks shall be benefited from your writing.
    Cheers! http://antiibioticsland.com/Cephalexin.htm

    Reply
  71. Pingback: ventolin hfa inhaler is it a steroid