gpt4 book ai didi

javascript - 自定义打印功能,打印内容在第一次事件触发时不显示

转载 作者:行者123 更新时间:2023-12-02 14:55:34 25 4
gpt4 key购买 nike

为了快速准确,请see this fiddle第一次单击带有“打印”标签的按钮时,将打开一个新窗口(打印内容),然后将弹出一个打印对话框,其中应该包含我设置其内容的内容,但没有显示内容,但是有打印对话框的标题。现在,如果您再次单击(第二次单击)带有“打印”标签的按钮,现在将显示打印对话框的内容,关于发生的情况有任何想法或线索吗?帮助、建议、推荐以使其始终显示?

这是我的原始代码

<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>

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 ));

最佳答案

问题是在调用w.print()函数之前,新窗口的DOM还没有完成渲染。一种方法是将打印函数添加到新窗口 HTML 底部的脚本标记中,以便在 DOM 完成渲染后执行...

/* ... other code ... */ content + '</div><scr'+'ipt>window.print();</scr'+'ipt></body></html>');
// don't need w.print here anymore
w.close();

fiddle :https://jsfiddle.net/b0qfsyxb/6/

关于javascript - 自定义打印功能,打印内容在第一次事件触发时不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35836045/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com