Chrome打印预览使用jQuery打印按钮失败_Jquery_Css_Google Chrome_Greasemonkey_Tampermonkey

Chrome打印预览使用jQuery打印按钮失败

jquery css google-chrome

Chrome打印预览使用jQuery打印按钮失败,jquery,css,google-chrome,greasemonkey,tampermonkey,Jquery,Css,Google Chrome,Greasemonkey,Tampermonkey,我有一个在页面上带有以下Greasemonkey（Tampermonkey）代码的信息亭，可用于收据打印： $("input").css("font-size", "xx-large"); $("#newcheckout").append ('<div id="autoCheckOrder"></div>'); $("#autoCheckOrder").append ('<button>Print Receipt?</button>'); var

我有一个在页面上带有以下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();
    }
} );

…等等。

问题在于CSS。你有：

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

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

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

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

这可能是因为“未定义”的问题吗？但它的工作原理与Firefox/greasemonkey中所写的一样。但我会尝试改变它。记住，所有浏览器的行为都不同，在浏览器之间获得像素相同的东西是一件傻事。原稿在哪里工作并不重要。答案是为什么它在Chrome上不起作用——在本例中，它实际上与脚本或GM没有任何关系。使用大多数打印机驱动程序，任何带有CSS的页面在Chrome中都会出现打印预览问题。我将对此进行测试。谢谢你的建议。将报告结果。尤里卡！我评论了一下风格，问题就解决了。谢谢我不确定是哪个违反css规则导致了这个…尝试了这个和那个，最后把它们都注释掉了。结果是可以接受的，我称之为“总结”。再次感谢你的帮助！

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