Chrome 打印预览失败，带有 jQuery 打印按钮答案

【问题标题】：Chrome Print-Preview fails with jQuery print buttonChrome 打印预览失败，带有 jQuery 打印按钮
【发布时间】：2012-11-05 10:16:32
【问题描述】：

我有一个自助服务终端，页面上有以下 Greasemonkey (Tampermonkey) 代码以启用收据打印：

$("input").css("font-size", "xx-large");
$("#newcheckout").append ('<div id="autoCheckOrder"></div>');
$("#autoCheckOrder").append ('<button>Print Receipt?</button>');

var loanTable = $("#loanTable")
var loanHTML  = loanTable.html().replace(/(\d{2}\/\d{2}\/\d{4})/g, "<br><b>$1</b>");

$("#autoCheckOrder button").click ( function () {
    var newWin      = window.open (""); 
    newWin.document.write ( "<!DOCTYPE html>" );
    newWin.document.write( "<html>" );
    newWin.document.write( "<head>" );
    newWin.document.write( "<title>" );
    newWin.document.write( "</title>" );
    newWin.document.write( "<style>" );
    newWin.document.write( "@media print { " );
    newWin.document.write( "body { " );
    newWin.document.write( "background-color: white;" );
    newWin.document.write( "height: 100%;" );
    newWin.document.write( "width: 60mm;" );
    newWin.document.write( "position: fixed;" );
    newWin.document.write( "top: 0;" );
    newWin.document.write( "left: 0;" );
    newWin.document.write( "margin: 0;" );
    newWin.document.write( "padding: 15px;" );
    newWin.document.write( "font-size: 14px;" );
    newWin.document.write( "line-height: 18px;" );
    newWin.document.write( "}" );
    newWin.document.write( "}" );
    newWin.document.write( "</style>" );
    newWin.document.write( "</head>" );
    newWin.document.write( "<body>" );
    newWin.document.write ( loanHTML ); 
    newWin.document.write( "</body>" );
    newWin.document.write( "</html>" );
    if(newWin.print()) {
        newWin.close();
    } else {
        newWin.close();
    }
} );

这在 Firefox 中运行良好——在 Chrome beta 19 中不行。今天刚刚更新。您按下“打印”按钮，打印预览出现并显示：

打印预览失败，请使用系统对话框。

更新

请参阅下面的 Brock Adam 的回答，然后是下面的工作代码（为了简洁起见，仅 CSS）：

@media print {
    body {
        background-color: white;
        width: 55mm;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;

...等等。

【问题讨论】：

这可能是由于“未定义”问题造成的吗？

标签： jquery css google-chrome greasemonkey tampermonkey

【解决方案1】：

问题在于 CSS。你有：

position: fixed;
top: 0;
left: 0;
margin: 0;

-- 试图将内容放在页面的最左上角，这对于您正在使用的任何打印机（或几乎任何物理打印机）都是不允许的。

更改这 4 个 CSS 参数中的任何一个，以将打印输出的开头放在打印机接受的任何边距内。
如果你注释掉 Greasemonkey 脚本的自动打印和自动关闭部分，你可以使用 Chrome 的 DOM 工具查看打印预览失败，然后调整 CSS 直到它工作。

显然，Chrome 更挑剔，而 Firefox 默认会根据需要移动和调整打印输出的大小。可能你可以为 Chrome 设置一个设置，也许。（我不知道并拒绝在Grab-All™产品上投入太多精力。）

【讨论】：

但它的工作方式与用 Firefox/greasemonkey 编写的一样。不过我会尝试改变它。
请记住，所有浏览器的行为都不同，并且在浏览器之间逐个像素地获取相同的东西是愚蠢的差事。原始脚本在哪里工作并不重要。答案说明了为什么它不能在 Chrome 上运行——在这种情况下，它实际上与脚本或 GM 没有任何关系。使用大多数打印机驱动程序，任何带有类似 CSS 的页面都会在 Chrome 中出现打印预览问题。
我即将对此进行测试。欣赏建议。将报告结果。
尤里卡！我注释掉样式，问题就消失了。谢谢！
我不确定是哪条有问题的 css 规则导致了这个……试过这个和那个，最后把它们都注释掉了。结果是可以接受的，我称之为“包装”。再次感谢您的帮助！