我有一个信息亭，页面上有以下 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 中运行不正常。今天刚刚更新。您按下“打印”按钮，出现打印预览并显示:
Print Preview Failed, Please Use system dialog.
更新
请参阅下面 Brock Adam 的回答，然后是下面的有效代码(为简洁起见，仅使用 CSS):
@media print {
body {
background-color: white;
width: 55mm;
position: absolute;
top: 0;
left: 0;
padding: 0;
...等等
最佳答案
问题出在 CSS 上。你有:
position: fixed;
top: 0;
left: 0;
margin: 0;
-- 它试图将内容放在页面的最左上角，这对于您使用的任何打印机(或几乎任何物理打印机)都是不允许的。
更改这 4 个 CSS 参数中的任何一个，以将打印输出的开始放在您的打印机接受的任何边距内。
如果您注释掉 Greasemonkey 脚本的自动打印和自动关闭部分，您可以使用 Chrome 的 DOM 工具查看打印预览失败，然后调整 CSS 直到它起作用。
显然，Chrome 更挑剔，而 Firefox 默认会根据需要移动和调整打印输出的大小。 可能您可以为 Chrome 设置一个设置。 (我不知道也拒绝在Grab-All™产品上投入太多精力。)
关于jquery - Chrome 打印预览失败，带有 jQuery 打印按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10521504/