使用 javascript 创建的打印页面不根据 css 进行样式设置答案

【问题标题】：Print page created with javascript not styling according to css使用 javascript 创建的打印页面不根据 css 进行样式设置
【发布时间】：2013-06-26 04:56:30
【问题描述】：

我有一个div 和id target_wrapper。

<div id="target_warpper">
      <div id="target">
      ///Some content here
      </div> 
</div>

而相应的打印页面的javascript函数是：

<div class="print_list">
                        <a href="javascript:PrintContent()">Print</a>
                    </div>

                    <script type="text/javascript">
                    function PrintContent() 
                    {


                        var DocumentContainer = document.getElementById('target_warpper');
                        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');


                        WindowObject.document.writeln('<!DOCTYPE html>');
                        WindowObject.document.writeln('<html><head><title></title>');
                        WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">');
                        WindowObject.document.writeln('</head><body>')

                        WindowObject.document.writeln(DocumentContainer.innerHTML);

                        WindowObject.document.writeln('</body></html>');

                        WindowObject.document.close();
                        WindowObject.focus();
                        WindowObject.print();
                        WindowObject.close();
                    }
                    </script>

但是当我点击Print链接时，出现的页面不包含我已经包含的csscss/print/css。

注意：当我单击打印弹出窗口的查看页面源时，它显示为空白！

【问题讨论】：

标签： javascript css printing popup window

【解决方案1】：

这是一个示例，显示此代码在 jsFiddle 中工作。我包含 jQuery 只是为了使单击时的事件绑定更容易一些。

当您注释掉print() 和close() - 更容易检查发生了什么。在那个例子中，我似乎得到了你想要的。新窗口，正确内容，link 标记与正确的href 属性。

如果您在使用 css 文件时遇到问题，请仔细检查文件路径。为简单起见，您可能应该只指定 css 文件的完整 url：http://example.com/css/print.css。

【讨论】：