Javascript 打印 div 在 Safari 中不起作用

标签 javascript html css safari

我有一个 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);

最佳答案

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

我稍微更改了您的代码,因此此解决方案可能无法满足您的需求,但它适用于所有浏览器(已在 Safari、FF、Chrome、IE8 上测试)。

请注意,您需要为弹出内容设置一个不同的页面(我更改了代码以检索契约(Contract)以自己制作示例,希望您能弄清楚如何获取契约(Contract)内容)。

代码:

打开弹出窗口的页面的 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 加载页面中的内容。

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

页面包含脚本后,holdReady再次设置为false,触发ready状态记录并调用print()close() 函数在 window 上。

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

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

关于Javascript 打印 div 在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19678236/

相关文章:

javascript - 让 JSLint 打破 visual studio 2010 中的构建

javascript - 如何添加文本字段的值

javascript 使用变量作为对象的键

javascript - 如何在 JavaScript 中编写正确的 OOP 代码?

html - 删除按钮标签中文本行之间的空格

javascript - 计算两个日期之间的差异

javascript - 在一个div中垂直居中一个div

javascript - 文本框在滚动模式中失去焦点

Jquery formvalidation 未捕获范围错误 : maximum call stack size exceeded

c# - 如何从文本框中删除CSS?