Search code examples
javascriptpdfiframevue.jspdfmake

iframe shows MIME warning pdfmake: Resource interpreted as Document but transferred with MIME type application/pdf:

We're writing a SPA using Vue.js. We want to generate a PDF clientside and are using pdfMake for that purpose (package available in npm with that name).

According to the documentation, in order to view the PDF inside an <iframe>, you can simply add the generated pdf URL to the src attribute of the <iframe>.

const pdfDocGenerator = pdfMake.createPdf(docDefinition);
pdfDocGenerator.getDataUrl((dataUrl) => {
    const targetElement = document.querySelector('#iframeContainer');
    const iframe = document.createElement('iframe');
    iframe.src = dataUrl;
    targetElement.appendChild(iframe);
});

This, however, throws a warning: 

Resource interpreted as Document but transferred with MIME type application/pdf: "data:application/pdf;base64,JVBERi0xLjMKJf////8KOCAwIG9iago8PAovVHlwZSAvRXh0R1N0YX ...

My html code regarding to the <iframe> is:

<iframe id="idIframe" type="application/pdf"
          class="col s12" style="height:100%;"
          ></iframe>

Javascript:

this.pdfObject = pdfMake.createPdf(contentDefinition);
this.pdfObject.getDataUrl((dataUrl) => {
    const iframe = document.querySelector('#idIframe');
    iframe.src = dataUrl;
});

This happens in Chrome browser version 63.0.3239.108 (Official Build) (64-bit)

If you need more info, just let me know!

Thx

Solution

  • Finally. Just use an embed node instead of iframe:

    <embed height="100%" class="col s12" id="idIframe" src="about:blank" type="application/pdf">