admin管理员组文章数量:1023242
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
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
Share Improve this question asked Jan 5, 2018 at 19:37 Andres BiargeAndres Biarge 3894 silver badges17 bronze badges1 Answer
Reset to default 4Finally. Just use an embed node instead of iframe:
<embed height="100%" class="col s12" id="idIframe" src="about:blank" 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
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
Share Improve this question asked Jan 5, 2018 at 19:37 Andres BiargeAndres Biarge 3894 silver badges17 bronze badges1 Answer
Reset to default 4Finally. Just use an embed node instead of iframe:
<embed height="100%" class="col s12" id="idIframe" src="about:blank" type="application/pdf">
本文标签：
版权声明：本文标题：javascript - iframe shows MIME warning pdfmake: Resource interpreted as Document but transferred with MIME type applicationpdf: 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745530635a2154731.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论