JavaScript 打印函数不携带样式表答案

【问题标题】：JavaScript Print Function not carrying the stylesheetJavaScript 打印函数不携带样式表
【发布时间】：2017-01-01 04:32:17
【问题描述】：

让我们从代码开始：

        var mywindow = window.open('', 'PRINT', 'height=600,width=800');


        mywindow.document.write('<html><head><base href="/" /><title>' + document.title + '</title>');
        mywindow.document.write('<style type="text/css" media="print" />table { width: 100%; }</style>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<h1> Returns for Today </h1>');
        mywindow.document.write(document.getElementById(printableArea).innerHTML);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print();
        mywindow.close();

        return true;

代码在这个输出上工作得很好

然后当我将 css 更改为这样的外部样式表时：

发件人 mywindow.document.write('<style type="text/css" media="print" />table { width: 100%; }</style>');

致 mywindow.document.write('<link rel="stylesheet" href="assets/css/printstyles.css" type="text/css" />');

我得到一个空白打印页：

但是如果我评论这行

//mywindow.print();
//mywindow.close();

我明白了：

意思是，外部样式表正在工作。

外部样式表只包含

table { width: 100%; }

知道为什么它不起作用吗？任何帮助将不胜感激。

【问题讨论】：

见Save a pre element as PDF with CSS
将 media="print" 添加到外部样式表的引用中。
@jeff，做到了，虽然没有样式哈哈

标签： javascript html css

【解决方案1】：

我在 Chrome 中遇到了同样的问题。我发现的问题是打印预览没有完全呈现，但页面仍然打印没有问题。

我最终做的是这样的：

var mywindow = window.open("", ...);
mywindow.document.write("...");
mywindow.document.close();
setTimeout(function() {
  mywindow.print();
  mywindow.close();
}, 10);

【讨论】：

问题是加载样式表是异步的，你在完成之前调用了print()。
如果添加<style>，问题仍然存在。我认为这只是当您立即close() 时打印预览渲染停止。