Question

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

这是我的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();
}

Answer 1

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

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

Answer 2

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

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

例如

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

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

为什么我的CSS没有打印？

2 个答案: