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

Posted 2023-05-08

【中文标题】Javascript 新窗口打开并打印 css 加载

【英文标题】：Javascript new window open and print css loading

【发布时间】：2019-01-27 05:01:58

【问题描述】：

我想使用新窗口打印部分 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 文件或至少在新窗口中侦听加载事件，您是否尝试在 WinPrint.onload 函数中调用 print 方法？如果这不起作用，那么您可能需要在 ajax 调用中以纯文本格式请求该 css 文件的内容，并将其直接注入到样式标记内新窗口的 DOM 中

此代码在单击打印按钮时运行

【参考方案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);

【讨论】：

这不适用于 Edge。 WinPrint.document.head.appendChild(cssElement)会报错

【参考方案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

【讨论】：

我以前用过这个方法，但我不太确定是不是我在模态中的 print_body，当我打印 css 时不能正常工作。