在 JavaScript 中打印页面

page print in javascript

本文关键字：打印 JavaScript      更新时间：2023-09-26

我正在尝试通过java脚本打印页面。代码是这样的：

<script type="text/javascript">
        function PrintContent(){
            var DocumentContainer = document.getElementById("divtoprint");
            var WindowObject = window.open("", "PrintWindow","width=1200,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
            WindowObject.document.writeln(DocumentContainer.innerHTML);
            WindowObject.document.close();
            WindowObject.focus();
            WindowObject.print();
            WindowObject.close();
        }
    </script>

然后我把这个函数称为<a onclick="PrintContent();" style="cursor:pointer;"><img src="images/printer.png" alt="Print" title="printer"/></a> 还有我想打印的内容，放在<div id="divtoprint"> </div>内。

但是在这种情况下，我得到的是没有css样式的打印页面。那么如何将 css 也集成到我的打印页面呢？请帮助我。

尝试：

<script type="text/javascript">
    function PrintContent(){
    var DocumentContainer = document.getElementById("divtoprint");
    var WindowObject = window.open("", "PrintWindow","width=1200,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    WindowObject.document.write('<html><head><title>Printwindow</title>');
    WindowObject.document.write('<link rel="stylesheet" href="style.css">');
    WindowObject.document.write('</head><body>');
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.write('</body></html>');
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
    }
</script>

找到 CSS 的link（或其他任何内容），并确保它具有包含 print 的 media 属性

。

你可以试试这个： 

<style type="text/css">
    @media print {
        #divtoprint { /** your css code goes here **/ }
        /** other selector style goes here which style you print **/
    }
</style>

您是否尝试过更改 CSS 标签以适用于所有媒体？

<link rel="stylesheet" href="style.css" media="all" type="text/css" />

或者如果你想更具体

<link rel="stylesheet" href="style.css" media="screen, print" type="text/css" />
相关文章：