javascript - iframe 显示 MIME 警告 pdfmake : Resource interpreted as Document but transferred with MIME type application/pdf:

Question

我们正在使用 Vue.js 编写 SPA。我们想要生成一个 PDF 客户端，并使用 pdfMake 来实现此目的(npm 中提供了具有该名称的包)。

根据文档，为了查看<iframe>里面的PDF ，您只需将生成的pdf URL添加到 src <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);
});

但是，这会引发警告:

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

我的 html 代码关于 <iframe>是:

<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;
});

这发生在 Chrome 浏览器版本 63.0.3239.108 (Official Build) (64-bit) 中

如果您需要更多信息，请告诉我!

谢谢

Answer 1

最后。只需使用 embed 节点而不是 iframe:

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