使用 Iframe 在 Javascript 中打印 PDF 文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18873719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 13:29:53  来源:igfitidea点击:

Print PDF File in Javascript using Iframe

javascriptpdf

提问by Vijay P.V

here is my code to print a pdf file in JavaScript using iframe. but i cant able to print nothing is happening , but this code is perfectly working in google chrome. in IE8 not working. ContentLoaderDiv is html division. please help me..

这是我使用 iframe 在 JavaScript 中打印 pdf 文件的代码。但我无法打印任何事情都没有发生,但此代码在谷歌浏览器中完美运行。在 IE8 中不起作用。ContentLoaderDiv 是 html 的划分。请帮我..

When I print a PDF document from our application which uses Java script to print instead of adobe Reader print dialog the browser print dialog is invoked.

当我从使用 Java 脚本打印而不是 adobe Reader 打印对话框的应用程序打印 PDF 文档时,将调用浏览器打印对话框。

Have anyone seen this problem? How to invoke the Adobe reader printer dialog instead of browser print dialog?

有没有人见过这个问题?如何调用 Adob​​e reader 打印机对话框而不是浏览器打印对话框?

 function printPdf() {
        var ContentLoaderDiv = document.getElementById('ContentLoaderDiv');
        ContentLoaderDiv.innerHTML = "";
        ContentLoaderDiv.innerHTML = '<div id="pdfdiv" style="position: relative;"><iframe id="frame1"  height="800" width="700" src="' + document.getElementById("<%= hdnPDFPathForObject.ClientID  %>").value + "print.pdf#scrollbar=1&toolbar=1&statusbar=0&messages=0&navpanes=1" + '"' + " /></iframe></div>";
        frame1.focus();
        frame1.print(); 

}

}

回答by Powerslave

Try this one:

试试这个:

function PdfUtil(url) {

    var iframe;

    var __construct = function(url) {
        iframe = getContentIframe(url);
    }

    var getContentIframe = function(url) {
        var iframe = document.createElement('iframe');
        iframe.src = url;
        return iframe;
    }

    this.display = function(parentDomElement) {
        parentDomElement.appendChild(iframe);
    }

    this.print = function() {
        try {
            iframe.contentWindow.print();
        } catch(e) {
            throw new Error("Printing failed.");
        }
    }

    __construct(url);
}

And you can use it as follows:

您可以按如下方式使用它:

var pdf = new PdfUtil(PDF_URL);
pdf.display(document.getElementById('placeholder'));

document.getElementById('printBtn').onclick = function() {
    pdf.print();
}

Obviously, though PDF_URLhere is a "constant", in your case it should most probably be generated.

显然,虽然PDF_URL这里是一个"constant",但在您的情况下,它很可能是生成的。

Works perfectly with IE8 and Chrome (should work also with other browsers). Also, the OO approach makes it far more maintainable and/or reusable. Slight modifications to the actual logic might still be required to fit all your needs.

与 IE8 和 Chrome 完美配合(也应与其他浏览器配合使用)。此外,OO 方法使其更易于维护和/或可重用。可能仍需要对实际逻辑稍作修改以满足您的所有需求。

回答by Svela

I have struggled a bit to find a solution that works for both IE and Chrome. This works for me:

我一直在努力寻找适用于 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);
});

...cheers.

...干杯。