Javascript新窗口打开并打印css加载

Question

我想使用一个新窗口来打印部分 HTML。

    var cssLink = document.getElementByTagName('link')[2];

    var prtContent = document.getElementById('print_body');

    var WinPrint = window.open('','','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');

    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.getElementsByTagName('head')[0].appendChild(link);
    WinPrint.document.close();

    WinPrint.focus();
    WinPrint.print();

但有时WinPrint 进行系统打印时，CSS 文件仍未加载。

我怎么能修好呢？

Answer 1

听起来有时浏览器没有及时加载 CSS 文件供您打印。 只有在加载 css 文件后才能运行打印代码，如下所示：

var cssElement = document.getElementsByTagName('link')[2].cloneNode();

var prtContent = document.getElementById('print_body');

var WinPrint = window.open('','','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');

WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();

cssElement.addEventListener('load', function () {
  WinPrint.focus();
  WinPrint.print();
});

WinPrint.document.head.appendChild(cssElement);

Answer 2

我认为这对你有用。

var cssLink = document.getElementByTagName('link')[2];

var prtContent = document.getElementById('print_body');

// open _blank page view before printing
var WinPrint = window.open('','_blank','left=0,top=0,width=1000,height=auto,toolbar=0,scrollbars=0,status=0');

// add new line code here
WinPrint.document.open();
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.getElementsByTagName('head')[0].appendChild(link);
WinPrint.document.close();
// remove WinPrint.focus() and WinPrint.print() because it will call print machine of system

因此，如果您想显示用于打印的 css。 你可以试试。

@media print {
    your css here
}

在此处查看更多信息： https : //www.w3.org/Amaya/User/doc/Printing.html