javascript – 打印功能仅在第二次点击后有效

我有这个功能来打印DIV.
每当页面加载并点击我的“打印”链接时,显示DIV没有CSS打印.
如果我关闭Chrome的打印可视化页面并再次单击“打印”链接,则DIV会应用CSS.

有什么想法吗？

function printDiv(divId) {
 
  var printDivCSSpre =
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">' +
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/dist/css/sb-admin-2.css" rel="stylesheet">' +
'<div style="width:1000px; padding-right:20px;">';
 
  var printDivCSSpost = '</div>';
 
  $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
 
    $("link").clone().appendTo($("#print_frame").contents().find("head"));
window.frames["print_frame"].document.body.innerHTML =
    printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
  window.frames["print_frame"].window.focus();
  var windowInstance = window.frames["print_frame"].window;
  windowInstance.print();
}

HTML

<a id="print" href="#">
    <i class="fa fa-print"></i> Print
</a>
<script>
    $('#print').click(function () {
        printDiv('report')
    })
</script>
 
<div id="report" class="report">
    <p># Generated Table#</p>
</div>

首先点击：

http://imgur.com/a/Go81Y

关闭打印预览页面并再次单击打印

http://imgur.com/a/SCxJF

解决方法

每件事都是对的,只需改变顺序即可.在第一次单击时,它在浏览器调试器中没有在sources部分显示’print_frame’,而在第二次单击时它(我使用chrome devtool).

因此在onload期间使用css属性加载到内存框架中：

var windowInstance;
$(function(){
    $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
    $("link").clone().appendTo($("#print_frame").contents().find("head"));
    windowInstance = window.frames["print_frame"].window;
 
});

和onClick只是附加html

$('#print').click(function () {
    var divId = 'report';
    var printDivCSSpre ='<div id="printReportDiv" style="width:1000px; padding-right:20px;">';
    var printDivCSSpost = '</div>';
 
    window.frames["print_frame"].document.body.innerHTML = printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
    window.frames["print_frame"].window.focus();
    windowInstance.print();
 
});

已更新jsfiddle

javascript – 打印功能仅在第二次点击后有效

解决方法

猜你在找的JavaScript相关文章