javascript - 使用 CSS 打印网页的一部分

Question

我有一个带表格的 div。我尝试使用 Javascript 打印 div:

<script type="text/javascript">
    function myFunction() {
        var prtContent = document.getElementById("printable");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write(prtContent.outerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    }
</script>

但是当我打印这个 div 时，div 并没有打印它的 CSS，比如 text-alignment、表格边框等等。

Answer 1

由于您正在创建一个新文档，它将独立显示和打印，不受创建文档中任何样式表的影响。如果要为其设置样式，则需要将样式表与创建的文档相关联。最简单的情况是，如果您所有的 CSS 代码都在一个外部文件 mystyle.css 中，添加一个引用它的 link 元素就足够了，例如在语句 WinPrint.document.write(prtContent.outerHTML) 之前的以下语句:

WinPrint.document.write('<link rel=stylesheet href=mystyle.css>');