iframe 显示 MIME 警告 pdfmake：资源被解释为文档但以 MIME 类型传输 application/pdf：

Question

我们正在使用 Vue.js 编写 SPA。我们想生成一个 PDF 客户端，并为此目的使用 pdfMake（在 npm 中可用该名称的包）。

根据文档，要查看 <iframe> 中的 PDF，您只需将生成的 pdf URL 添加到 [=15= 的 src 属性即可].

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 ...

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

<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">

iframe 显示 MIME 警告 pdfmake：资源被解释为文档但以 MIME 类型传输 application/pdf：

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

javascript

pdf

iframe

vue.js

pdfmake