logo标签列表

打印窗口第一次无法工作

javascriptphpjquery
5
我正在尝试使用打印选项保存PDF文档，但是出现了一个奇怪的问题：第一次无法正常工作，只出现空白页面。我已经进行了谷歌搜索并获得了一些解决方案，但是没有成功。谢谢。
 $("#btnPrint").click(function () {
     // alert("hi");
     $(".accordion-content").css('display','block');
     var printWindow = window.open('', '', 'height=400,width=1200');
     var strin="";
     printWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/print.css"/></head><body onload="window.focus();" onbeforeunload="window.close();">');
     // alert($(".logoHolder").html());
     printWindow.document.write($(".logoHolder").html());
     $('input[class="subCheck"]:checked').each(function() {
          strin += $("#"+this.value).html()+"<br><br><br>";
     });
     printWindow.document.write(strin);
     // alert();
     printWindow.document.write('</body></html>');
     printWindow.print();
     printWindow.close();
     //$( "#btnPrint" ).trigger( "click" );
});
1
你的代码一团糟，所以我看不出来，但是你是在DOM加载之前尝试打印输出吗？ - ndugger
@Nick 是的，我正在尝试使用DOM。 - 3bu1
@MarcB print.doc.write(strin) 在 click 事件处理程序中，请重新验证，每个函数的关闭。 - 3bu1
@3bu1：我现在明白了。你应该清理一下格式。适当的缩进确实有助于这种情况。 - Marc B
document.write不像构建字符串。当您写出一个元素时，它会自动关闭。因此，在之后添加一个闭合标签是没有任何作用的。为什么要打开一个新窗口？使用CSS打印媒体并打印当前页面以显示您想要展示的内容。 - epascarello
2个回答
3
为了查找问题出现的位置，我修改了您的代码，将所有内容放入一个变量中，并将其写入窗口。似乎document.write在尝试打印窗口之前没有呈现文本。相反，我更改了body的innerHTML，这似乎运行良好：
$("#btnPrint").click(function(){
  $(".accordion-content").css('display','block');
  var printWindow = window.open('', '', 'height=400,width=1200');
  var html = ''+
    '<html>'+
    '<head>'+
    '<link rel="stylesheet" type="text/css" href="css/print.css"/>'+
    '</head>'+
    '<body onload="window.focus();" onbeforeunload="window.close();">'+
    $(".logoHolder").html();
  $('input[class="subCheck"]:checked').each(function() {
    html += $("#"+this.value).html()+"<br><br><br>";
  });
  html += '</body></html>';
  //printWindow.document.write(html);
  printWindow.document.body.innerHTML = html;
  printWindow.print();
});

http://jsfiddle.net/hoqp8zxp/

更新以帮助您css

关于 CSS，我认为有几个问题：

  1. 新窗口位置为 about:blank（或类似的），因此相对路径将无法工作。您应该使用绝对路径（http://host/css/print.css 而不是 css/print.css）
  2. 由于样式表异步加载，您可能必须使用一个 hack 以便在样式表完全加载后执行打印命令。像这样的东西：https://viget.com/inspire/js-201-run-a-function-when-a-stylesheet-finishes-loading 注意：您也可以使用样式标签来加载样式

这是更新的代码，使用上面提到的 hack（从 StackOverflow 使用样式表）：

$("#btnPrint").click(function(){
  $(".accordion-content").css('display','block');
  var printWindow = window.open('', '', 'height=400,width=1200');
  var cssFile = 'http://cdn.sstatic.net/stackoverflow/all.css?v=544053bd81fe';//Replace with your absolute path
  var html = ''+
    '<html>'+
    '<head>'+
    '<link rel="stylesheet" type="text/css" href="'+cssFile+'"/>'+
    '</head>'+
    '<body onload="window.focus();" onbeforeunload="window.close();">'+
    $(".logoHolder").html();
  $('input[class="subCheck"]:checked').each(function() {
    html += $("#"+this.value).html()+"<br><br><br>";
  });
  html += '</body></html>';
  //printWindow.document.write(html);
  printWindow.document.body.innerHTML = html;
  var img = document.createElement('img');
  printWindow.document.body.appendChild(img);
  img.style.display = 'none';
  img.onerror = function(){
    printWindow.print();
  };
  img.src = cssFile;
});

http://jsfiddle.net/hoqp8zxp/1/

@3bu1 我刚刚更新了我的答案，请看看是否适用于你。 - Piyin
1
我使用 setTimeOut 来解决这个问题，并且对我来说很有效。我用我的解决方案修改了你的代码。
$("#btnPrint").click(function () {
 // alert("hi");
 $(".accordion-content").css('display','block');
 var printWindow = window.open('', '', 'height=400,width=1200');
 var strin="";
 printWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/print.css"/></head><body onload="window.focus();" onbeforeunload="window.close();">');
 // alert($(".logoHolder").html());
 printWindow.document.write($(".logoHolder").html());
 $('input[class="subCheck"]:checked').each(function() {
      strin += $("#"+this.value).html()+"<br><br><br>";
 });
 printWindow.document.write(strin);
 // alert();
 printWindow.document.write('</body></html>');
 printWindow.close();
setTimeout(function () {
            printWindow.focus();
            printWindow.print();
             }, 1000);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接