iframe 显示 MIME 警告 pdfmake：资源解释为文档但使用 MIME 类型应用程序/pdf 传输：答案

【问题标题】：iframe shows MIME warning pdfmake: Resource interpreted as Document but transferred with MIME type application/pdf:iframe 显示 MIME 警告 pdfmake：资源解释为文档但使用 MIME 类型应用程序/pdf 传输：
【发布时间】：2018-01-05 19:37:12
【问题描述】：

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

根据文档，要查看<iframe> 中的PDF，您只需将生成的pdf URL 添加到<iframe> 的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)

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

谢谢

【问题讨论】：

标签： javascript pdf iframe vue.js pdfmake

【解决方案1】：

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

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

【讨论】：

在 Chrome 实际版本中，您仍然会收到警告，也带有对象类型标签