Javascript 自定义打印功能，打印内容不显示在第一个事件触发器上_Javascript_Jquery_Printing

Javascript 自定义打印功能，打印内容不显示在第一个事件触发器上

javascript jquery printing

Javascript 自定义打印功能，打印内容不显示在第一个事件触发器上,javascript,jquery,printing,Javascript,Jquery,Printing,请快速准确。第一次单击带有“打印”标签的按钮时，将打开一个新窗口（打印内容），然后将弹出一个打印对话框，其中应该有我设置的内容，但没有显示内容，但有打印对话框的标题。现在，如果您再次单击（第二次单击）带有“打印”标签的按钮，打印对话框的内容现在显示出来，您对正在发生的事情有什么想法或线索吗？帮助、建议、推荐，使其始终显示出来这是我的原始代码 <button>Print</button> <div id="print"> <table> <

请快速准确。第一次单击带有“打印”标签的按钮时，将打开一个新窗口（打印内容），然后将弹出一个打印对话框，其中应该有我设置的内容，但没有显示内容，但有打印对话框的标题。现在，如果您再次单击（第二次单击）带有“打印”标签的按钮，打印对话框的内容现在显示出来，您对正在发生的事情有什么想法或线索吗？帮助、建议、推荐，使其始终显示出来

这是我的原始代码

<button>Print</button>
<div id="print">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jason Guatamala</td>
      <td>Male</td>
      <td>18</td>
      <td>Somewhere</td>
    </tr>
  </tbody>
</table>
</div>

打印
名称
性别
年龄
地址
贾森瓜塔马拉
男性
18
某处

jquery

$(document).ready(function(){
  $("button").click(function(){
    $("#print").print();
  });
});
(function ( $ ) {
    $.fn.print = function(){
        var content =  $(this).html();
        var style = '<style media="print" type="text/css">body{font-family: Roboto, sans-serif;font-weight:500;font-size:13px;-webkit-print-color-adjust: exact;}table{width:100%;font-size:12px!important;}table tr td{border:1px solid rgba(0,0,0,.05);padding:3px;}table tr:nth-of-type(4n+1),table tr:nth-of-type(4n+2),table tr:nth-of-type(4n+3),table tr:nth-of-type(4n+4){background:#eee}table tr:nth-of-type(8n),table tr:nth-of-type(8n-1),table tr:nth-of-type(8n-2),table tr:nth-of-type(8n-3){background:#ddd}</style>';
        var w = window.open('TT COLLECTION','', '');
        w.document.write('<html><head><title>TT COLLECTION</title><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">' + style + '</head><body><div style="font-size: 13px !important;" id="lf_print_main_wrapper">' + content + '</div></body></html>');
        w.print();
        w.close();
    };
}( jQuery ));

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#print”）.print（）；
});
});
（函数（$）{
$.fn.print=函数（）{
var content=$（this.html（）；
var style='正文{字体系列：Roboto，无衬线；字体重量：500；字体大小：13px；-webkit打印颜色调整：精确；}表格{宽度：100%；字体大小：12px！重要；}表格tr td{边框：1px实心rgba（0,0,0,05）；填充：3px；}表格tr:n类型（4n+1），表格tr:n类型（4n+2），表格tr:n类型（4n+3），表格tr:n类型（4n+4）{背景：}表tr:nth类型（8n），表tr:nth类型（8n-1），表tr:nth类型（8n-2），表tr:nth类型（8n-3）{背景：#ddd}；
var w=窗口打开（'TT集合'，''）；
w、 编写（'TT集合'+样式+''+内容+''）；
w、 打印（）；
w、 close（）；
};
}（jQuery））；

因为

document.write

无法在新打开的窗口中立即和阻止地更新DOM。下一条指令

w.print（）将立即被调用
因此，您可以稍后通过setTimeout
调用print
方法
    setTimeout(function(){w.print();w.close();}, 2000);

因为document.write
无法在新打开的窗口中立即和阻止地更新DOM。下一条指令w.print（）将立即被调用
因此，您可以稍后通过setTimeout
调用print
方法
    setTimeout(function(){w.print();w.close();}, 2000);

问题是在调用w.print（）
函数之前，新窗口的DOM尚未完成渲染。一种方法是将print函数添加到新窗口HTML底部的脚本标记中，以便在DOM完成渲染后执行它
/* ... other code ... */ content + '</div><scr'+'ipt>window.print();</scr'+'ipt></body></html>');
  // don't need w.print here anymore
  w.close();

/*。。。其他代码…*/内容+“window.print（）；”；
//不再需要在这里打印w
w、 close（）；

Fiddle:
问题是在调用w.print（）
函数之前，新窗口的DOM尚未完成渲染。一种方法是将print函数添加到新窗口HTML底部的脚本标记中，以便在DOM完成渲染后执行它
/* ... other code ... */ content + '</div><scr'+'ipt>window.print();</scr'+'ipt></body></html>');
  // don't need w.print here anymore
  w.close();

/*。。。其他代码…*/内容+“window.print（）；”；
//不再需要在这里打印w
w、 close（）；

Fiddle:
很酷，但是有没有办法在关闭打印对话框后关闭打开的窗口？很酷，但是有没有办法在关闭打印对话框后关闭打开的窗口？但是问题是，由于服务器或网络负载性能的原因，当内容在新打开的窗口上呈现的时间过长，然后脚本在设置的超时（2000）后触发，然后内容仍然无法在打印对话框上呈现时，可能会出现这种情况。但问题是，由于服务器或网络负载性能的原因，当内容在新打开的窗口上呈现的时间过长，然后脚本在设置的超时（2000）后触发，然后内容仍然无法在打印对话框上呈现时，就会出现这种情况。