Chrome jQuery打印按钮预览失败
Chrome jQuery打印按钮预览失败
提问于 2012-05-09 17:56:31
我在页面上有一个带有以下Greasemonkey (Tamper猴子)代码的信息亭，以支持收据打印：
$("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 19中。今天刚刚更新。按下“打印”按钮，打印预览就会出现，并显示：
打印预览失败，请使用系统对话框。
更新
下面请参阅Brock Adam的答案，然后是下面的工作代码( CSS仅为简洁起见)：
@media print {
body {
background-color: white;
width: 55mm;
position: absolute;
top: 0;
left: 0;
padding: 0;...etc。
Stack Overflow用户
回答已采纳
发布于 2012-05-10 05:26:39
问题在于CSS。你有：
position: fixed;
top: 0;
left: 0;
margin: 0;--它试图将内容放在页面的左上角，这是不允许您使用的任何打印机(或几乎任何物理打印机)。
更改这4个CSS参数中的任何一个，以便将打印输出的开始置于打印机接受的任何边距内。
如果您注释掉Greasemonkey脚本的自动打印和自动关闭部分，您可以使用Chrome的DOM工具来查看打印预览失败，然后调整CSS直到它工作。
显然，Chrome更加挑剔，而Firefox默认在必要时移动和调整打印输出大小。也许你可以为Chrome设置一个设置。(我不知道，并且拒绝在抓取-全™产品上投入太多的精力。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10521504
复制相关文章
相似问题
腾讯云开发者
