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

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

有什么想法吗？

使用Javascript

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