JavaScript实现在网页上打印页面某块区域

xueyong4712816

于 2011-07-11 12:00:46 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript function 报表 table

本文链接：https://blog.youkuaiyun.com/xueyong4712816/article/details/6597293

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种通过JavaScript在网页上实现打印指定表格的方法。利用window.open创建新的窗口，并通过document.write将所需打印的内容写入该窗口，最后调用document.execCommand('print')实现打印功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做了几天报表，看CrystalReport有自动打印和导出功能，没咋关键细节。今天想着在网页上点个按钮就能实现打印当前页面不是更灵活。所以做了下面这个东西。

代码附上，主要是document.execCommand("print");

    <script type="text/javascript" language="javascript">
        function myPrint() {
            var table = document.getElementById("XXXTable");
            var printDiv = table.parentElement;
            var printWindow = window.open("about:blank", "newwindow",
            "top=20,left=20,width=1024,height=768,toolbar=no,scrollbars=yes,menubar=no,resizable=no,dependent=yes,alwaysLowered=yes");
            var headInnerHTML = document.getElementsByTagName("HEAD")[0].innerHTML;
            var bodyInnerHTML = printDiv.innerHTML;
            printWindow.document.write("<html><br/><head><br/>" + headInnerHTML + "<style type=\"text/css\">" +
            ".DocumentTitleDiv{border-bottom:none;font-size:30px;}" +
            "#header{margin-bottom: -10px;}#footer{margin-top: 15px;}" +
            "td{font-size:12px;height:26px;}.DocumentFooterDiv td{font-size:16px;font-weight:bold;}</style>" + "</head>" + bodyInnerHTML + "<body>" + "</body></html>");
            printWindow.document.execCommand("print");
            printWindow.close();
        }
    </script>