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

我想使用一个新窗口来打印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文件仍然没有加载

---

我如何修复它？

听起来浏览器有时没有及时加载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);

---

我想这对你会有用的

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
}

---

在此处查看更多信息：

此代码何时触发？点击一下？还是就在它加载页面时？这段代码放在哪里？我认为您需要在新窗口中预装css文件或至少侦听加载事件，您是否尝试在WinPrint.onload函数中调用print方法？如果这不起作用，那么您可能需要在ajax调用中以纯文本格式请求css文件的内容，并将其直接插入样式标记内新窗口的DOM中。当打印按钮单击时，此代码运行。我以前使用过此方法，但我不确定我的打印体是否在模式内，当我打印css时，效果不好。这在Edge上不起作用。WinPrint.document.head.appendChild（cssElement）将导致错误