3

我有一个 Javascript 函数，可以打印网页中两个元素的内容。它适用于 Chrome、Firefox 和 IE，但 Safari 只会打开一个空窗口，如果我选择打印，它只会打印一个空白页。

这是我的代码：

var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";


//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);

//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";

//Set up print window and print
var printWindow = window.open('', '', params);   
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();

//Close the window
printWindow.close();

有没有办法可以修改我的代码以允许它在 Safari 中正确呈现页面以便我可以打印它？最好不使用额外的插件。

编辑：谢谢埃里克，但这对我不起作用。为打印添加时间延迟似乎效果很好，尽管它并不理想，即使是 10 毫秒的延迟也能解决问题。我使用的线路是：

setTimeout(this.print, 100);
4

1 回答 1

3

我找到了解决这个问题的方法。问题在于window.print()并非所有浏览器的标准，Safari 在触发它时可能采用不同的方法。

我对你的代码做了一些修改，所以也许这个解决方案不适合你的可能性，但它适用于所有浏览器（在 Safari、FF、Chrome、IE8 上测试）。

请注意，您需要为弹出内容提供不同的页面（我更改了代码以检索合同以自己制作示例，希望您能弄清楚如何获取合同内容）。

编码：

打开弹出窗口的页面的 HTML

<body>
    <input type="button" id="popup" value="Open Popup" />
    <div id="yourContract">
        <div>blablabla</div>
        <div>blablabla2</div>
        <div>blablabla3</div>
        <table>
            <tr>
                <td>blablabla td1</td>
                <td>blablabla td2</td>
            </tr>
            <tr>
                <td>blablabla td3</td>
                <td>blablabla td4</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $("#popup").click(function(){
        var win = window.open("static.html");
    });
</script>

弹出窗口的 HTML (static.html)：

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
            $.holdReady(true);
            $.getScript("print.js", function() {
                $.holdReady(false);
            });
        </script>
    </head>
    <body>
        <script>
            var contract = window.opener.$("#yourContract").html(); //change to fit your needs
            $("body").html(contract);
        </script>
    </body> 
</html>

由 static.html 调用的 JS 文件 (print.js)

$(document).ready(function(){
    window.print();
    window.close();
});

它是如何工作的：

static.html由两script部分组成。正文中的部分通过 javascript 加载页面中的内容。

头部中的部分通过设置为来防止文档触发ready状态。然后它会加载等待文档准备好的文件，但我们将决定确切的时间，因为我们正在阻止它。holdReadytrueprint.js

将脚本包含在页面holdReady中后再次设置为false，触发ready状态到文档并调用.and上print()的close()函数window。

然而，这发生在浏览器加载所有页面内容之后，因此您将在弹出页面和打印对话框中看到预览。

希望这个解决方案是您所需要的。

于 2013-10-31T16:06:24.117 回答