如果 src = pdf，如何从 IFRAME 打印 PDF？答案

【问题标题】：How to print PDF from IFRAME if src = pdf?如果 src = pdf，如何从 IFRAME 打印 PDF？
【发布时间】：2012-11-19 07:49:50
【问题描述】：

我有一个 iframe，需要直接指向 PDF 文件（不是带有 PDF 的页面）：

<iframe id="ecard-pdf" name="ecard-pdf" style="position: absolute;" src="/profile.pdf">
</iframe>

我希望能够在这个 iFrame 中打印 PDF

我在其他不符合我需求的问题中找到了几种解决方案：

需要在 iframe 中有一个函数（ https://stackoverflow.com/a/473270/1246369)
建议对焦框架，然后对其执行打印操作（ https://stackoverflow.com/a/9616706/1246369)
访问 iframe 的 contentWindow 并打印它（ https://stackoverflow.com/a/9617566/1246369)
这些变化

但是，如果 iframe 的 src 直接指向 PDF 而不是包裹在 PDF 周围的页面，FireFox 和 IE 似乎无法执行此操作。

火狐：

它不打印，而是显示此对话框：“阻止此页面创建其他对话框”，带有“确定”和“取消”按钮，这两个按钮都不打印 PDF。

IE：

忽略我使用上述方法打印的尝试。

问题：

无论用户使用什么浏览器，我怎样才能让用户在 iFrame 中打印 PDF？

【问题讨论】：

你可以对抗浏览器，或者你可以创建一个 HTML 包装页面（例如/printpdf.php?file=/profile.php）并打印该页面。
你应该检查这个answer，似乎知道你在 IE 和 Firefox 上做什么。
您需要指定pdf是带有src="file://..."的文件
@CS_STEM 没有证据表明这是在本地文件系统上，即使是这样，这个问题也已经存在一年了。
@QuarK 他去年问过这个问题。

标签： javascript pdf iframe printing

【解决方案1】：

我一直在努力寻找一种适用于 IE 和 Chrome 的解决方案。这对我有用：

$(function() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');
    var edge = ua.indexOf('Edge/');
    var url = '/url/to/file.pdf';
    var pdf ='';
    var style = 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;';

    if(msie > 0 || trident > 0 || edge > 0){
        pdf = '<object data="' + url + '" name="print_frame" id="print_frame" style="' + style + '" type="application/pdf">';
    }
    else{
        pdf ='<iframe src="' + url + '" name="print_frame" id="print_frame" style="' + style + '"></iframe>';
    }

    $(document.body).append(pdf);

    setTimeout(function(){
        window.frames["print_frame"].focus();
        window.frames["print_frame"].print();
    },2000);
});

...干杯。

【讨论】：

【解决方案2】：

正如similar question 的答案中所建议的那样，您可以这样做：

window.frames.pdfFrame.print();

这应该可以解决您的问题。

【讨论】：

【解决方案3】：

选项1：

我没有对此进行测试，但我在这里找到了另一个答案：https://stackoverflow.com/a/4096547/2528978

假设您可以使用以下内容：

<style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
</style>

那么只显示pdf？

选项 2：

创建一个指向“打印我”的 pdf 文件的超链接

<a href='Path/To/PDF'>Print Me</a>

希望这会有所帮助...

-安德鲁

【讨论】：

【解决方案4】：

这似乎有效：

   <style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
   </style>

那么只显示pdf？

【讨论】：

【解决方案5】：

const target_iframe = $("#pdfViewerIframe")

target_iframe.attr("src", URL.createObjectURL(new Blob([resp], {
                                type: "application/pdf"
                            })))

target_iframe[0].contentWindow.print()

注意：resp 是您从服务器获取的 pdf

【讨论】：

【解决方案6】：

您可以直接使用窗口打印选项。使用 onclick 选项

onclick="javascript:window.print();"

【讨论】：

不会在 iframe 中打印 pdf 内容