Question

我有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链接时，显示的页面不包含我已包含的css css/print/css。

注意：当我点击打印弹出窗口的视图页面来源时，它显示为空白！

Answer 1

以下示例显示此代码在jsFiddle中运行。我包含jQuery只是为了让点击事件绑定更容易。

当您注释掉print()＆amp; close() - 检查发生的情况要容易得多。在那个例子中，我似乎得到了你想要的。新窗口，正确的内容link标记，其中包含正确的href属性。

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

根据css使用javascript创建的打印页面没有样式

1 个答案: