为什么我的 CSS 没有打印

Why my CSS is not printed?

本文关键字：打印 CSS 我的 为什么      更新时间：2023-09-26

我正在尝试通过创建一个包含我要打印的html的新窗口元素来打印DIV的内容。一切正常，css 样式在打印预览窗口中正确显示，但当窗口物理打印到文件或打印机时，样式会丢失。我怀疑 print（） 事件是在加载 css 之前触发的，但不确定如何解决这个问题。

这是我的js代码

  function printDiv (elem)
  {
    var popup = window.open('','','width=800,height=500,toolbar=no, menubar=no');
    popup.document.writeln('<!DOCTYPE html>');
    popup.document.writeln('<html><head><title></title>');
    popup.document.writeln('<link rel="stylesheet" type="text/css" href="/assets/css/main.css">');
    popup.document.writeln('</head><body class="popup-body">');
    popup.document.writeln(elem.html());
    popup.document.writeln('</body>');
    popup.document.writeln('</html>');
    popup.print();
    popup.close();
}

您可以在打印时使用@media添加样式，@media print

http://www.w3schools.com/css/css_mediatypes.asp

您可以通过 setTimeout 延迟文档的打印，例如

 setTimeout(function(){
    popup.print(); }, delayedAmount);

例如

  setTimeout(
    function(){ 
       popup.print(); 
       popup.close();
  }, 1000);

这将在加载窗口 1000 毫秒（1 秒）后打印文档。请注意，您还必须延迟窗口的关闭。

相关文章：