window.print();打印案例

最新推荐文章于 2024-08-17 02:26:34 发布

太阳的后裔

最新推荐文章于 2024-08-17 02:26:34 发布

阅读量813

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43942765/article/details/102871609

版权

js 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

小编最近遇到了一个打印的功能，该功能是用window.print();做的，废话不多说，来简单看看吧！
效果：在这里插入图片描述
点击打印：

源代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    
</head>
<body>
    <form id="form1" runat="server">
     
    <!--需要打印的内容start-->
    <div id="sholdPrint">
        <p>《齐天大圣》</p>
        <div>根据小说《西游记》改编的一部电影！</div>
        <p>《哪吒之魔童降世》</p>
        <div>根据小说《封神榜》改编的一部电影！</div>
        <p>《战狼》</p>
        <div>吴京的经典动作电影！</div>
        <p>《新三国》</p>
        <div>东汉末年，群雄并起，三分天下！</div>
    </div>
    <!--需要打印的内容end-->
        <input type="button" name="printBut" value="打印" onClick="print()" />
    </form>
    <script type="text/javascript">
        function print()
        {
            var printContent = document.getElementById('sholdPrint').innerHTML;//获得需要打印内容的HTML代码
            printWindow = window.open('', '_blank',
                'width=1700,height=800,location=0,menubar=0,status=0,toolbar=0,scrollbars=1');
            printWindow.document.write(printContent);//这里向新建的窗体中写入BODY的内容，注意，外边加的额外DIV是有必要的，它里面CSS可以控制打印时不会出现空白页
            printWindow.focus();//当前新建的窗口获得焦点
            printWindow.document.close();//关闭新建窗口的文档输出流，这个是必须的，否则下面的打印语句无效
            printWindow.print();//打印当前新建窗口中的内容
            printWindow.close();//关闭新建的窗口
        }
    </script>
</body>
</html>

看完之后，你是不是有一些问题呢？

第一，为什么小编非要新建一个窗口做前提然后才真正的打印呢？
原因在于，当点击打印时，该页面会对原页面进行干扰，如果不是静态网页，那么原网页可能会受到影响。

第二，window.print()的好处是什么？
window.print()好处在于，它可以直接将页面打印出来，也就是说，页面上的样式都可以在页面上修改，就好比我们可以很轻松的在页面上画一个div或者table，而其他的第三方控件比如说Lodop.js需要自己一点点的反复调试其样式，并且将其table改成可伸缩类型的也不是这么容易的不是吗？

但小编还是想诚恳多说一句，Lodop.js依然是小编十分喜欢的一个框架。
Lodop.js