Question

我有一个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中正确呈现页面以便我可以打印它？最好不要使用额外的插件。

编辑：感谢Eric，但这对我不起作用。为打印添加时间延迟似乎工作得很好，虽然它并不理想，即使10毫秒的延迟也解决了这个问题。我使用的是：

setTimeout(this.print, 100);

Answer 1

我找到了解决这个问题的方法。问题在于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设置为holdReady，头部中的部分可防止文档触发true状态。然后它加载等待文档准备就绪的print.js，但我们将决定确切的时刻，因为我们正在阻止它。

页面中包含脚本后holdReady再次设置为false，触发ready状态以记录并调用print()和close()函数{1}}。

然而，在浏览器加载了所有页面内容后会出现这种情况，因此您将在弹出页面和打印对话框中看到预览。

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

Javascript打印div在Safari中不起作用

1 个答案:

代码：

它是如何运作的：