Question

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

...等

Answer 1

问题是CSS。你有：

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

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

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

显然，Chrome更安全，而Firefox则默认根据需要移动和调整打印输出。可能是您可以为Chrome设置的设置。（我不知道并且拒绝在Grab-All™产品上投入太多精力。）

Chrome打印预览因jQuery打印按钮而失败

1 个答案: