logo标签列表

如何在Google Chrome中打印PDF？

javascript
7

我有一个与按钮相关联的pdf文件。当我点击按钮时，我希望能够打印pdf。这是我的按钮代码：

<input type="submit" class="btn-red" value="Print"
name="Submit" id="printbtn"
onclick="printPDF('http://www.irs.gov/pub/irs-pdf/fw4.pdf')" />

现在我的打印功能是这样工作的:
    function printPDF(pdfUrl)
    {

    if ((navigator.appName == 'Microsoft Internet Explorer') ) 
    window.print(pdfUrl,"_self");
    else
    {
    var w = window.open(pdfUrl,"_self");
    w.print();
    w.close();
    }
    }

问题是，在IE和Firefox中运行正常，但在Chrome中不起作用。在ie和Firefox中，它打开了xps打印机选项，但在chrome中，它只是打开了一个新的打印窗口，显示div的打印预览而不是pdf。但我想在这里打开xps选项。
编辑：在chrome中，当我尝试打印时，只有html元素作为预览，而不是pdf。我正在使用的Chrome版本是20.0.1132.57
如何解决这个问题？请帮忙。
2个回答
6
这对我非常有帮助，而且不需要一个宿主HTML文件。关键是等待onload事件触发：
像这样的链接：
<a class="print-pdf-link" href="/your/pdf.pdf">Print PDF</a>

我使用了JavaScript：
$('a.print-pdf-link').click(function () {
    var w = window.open($(this).attr('href'));

    w.onload = function () {
        w.print();
    };

    return false;
});
4

我曾经遇到同样的问题，但我采用了不同的方法，这个方法在Chrome和Firefox上都适用。

我的解决方案涉及一个print.html辅助文件，它将PDF文件的url作为GET类型参数接收，然后在iframe中加载pdf。然后它会不断检查PDF是否已完全加载（绑定到onload事件无效），并在完成时触发打印方法。

这里是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <title>Print Page</title>

    <meta name="title" content="Print" /> 

    <script>

    (function (window, document, undefined) {


        var printy = {

                urlGET: function (param) {

                    var params = document.URL.split('?');

                    if(params.length > 1) {
                        params = params[1].split('&');

                        for (var  i = 0, len = params.length; i < len; i++) {
                            if (params[i].split('=')[0] === param) {
                                return params[i].split('=')[1];
                            }
                        }
                    }

                    return null;
                },


                init: function () {

                    var self = this;

                    window.onload = function () {

                        var src = self.urlGET('path');

                        //creating an iframe element
                        var ifr = document.createElement('iframe');
                        document.body.appendChild(ifr);

                        // making the iframe fill the viewport
                        ifr.width  = '100%';
                        ifr.height = window.innerHeight;

                        // continuously checking to see if the pdf file has been loaded
                        self.interval = setInterval(function () {

                            if (ifr.contentDocument.readyState === 'complete') {
                                clearInterval(self.interval);
                                // doing the actual printing
                                ifr.contentWindow.print();
                            }
                        }, 100); 

                        ifr.src = src;
                    }
                }
            }

            printy.init();

    })(window, document, undefined);
    </script>

</head>
<body>
</body>
</html>

这个解决方案尚未在IE上进行测试。我们在工作中使用的是Mac，所以这不是一个选择。
为了进行打印，我通过调用类似于以下URL的链接来使用它：http://example.com/print.html?path=docs/myfile.pdf
谢谢分享。我会试一下并告诉你，它是否适用于我。 - The Dark Knight
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接