2

I am trying to use pdfkit.js (check out the in-browser demo) and blob-stream.js to create a PDF document and render it on-the-fly in the browser.

Below is the code creates a blob:null/id: 

$(document).ready(function() {
  var doc = new PDFDocument();
  var stream = doc.pipe(blobStream());
  doc.fontSize(25).text('Here are some vector graphics...', 100, 80);
  doc.end();
  stream.on('finish', function() {
    var iframe = document.querySelector('iframe');
    var blob_url = stream.toBlobURL('application/pdf');
    iframe.src = blob_url;
  });
});
iframe {
  border: 1px solid black;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src='https://github.com/devongovett/pdfkit/releases/download/v0.8.0/pdfkit.js'></script>
<script src='https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js'></script>

<iframe width="600" height="775"></iframe>

When I run this locally, I see the following output in the Chrome tools console:

Resource interpreted as Document but transferred with MIME type application/pdf: "blob:null/id".

I have recently learned that this probably has something to do with iframes and their origin. I have tried updating the iframe to: <iframe id='pdf_iframe' sandbox="allow-same-origin" width="600" height="775" type="application/pdf"></iframe>. However, this has not solved the problem.

claggierk
  • 56
  • 5
  • 1
    I think the problem here has something to do with setting the src of the iFrame. I have not yet figured it out but [this](https://stackoverflow.com/questions/31184505/sanboxing-iframe-and-allow-same-origin) post and [this](https://stackoverflow.com/questions/28377733/url-createobjecturl-returns-a-blob-with-null-prepended-eg-blobnull-12415-63) post seem related. – claggierk Jul 20 '17 at 12:39

0 Answers0