HTML----打印网页指定区域

开发中遇到了一个需求，需要用网页写一个回执单，然后点击打印打印指定区域内容，最后选择了使用jQuery的print.js

1.下载print.js:

jquery_print.js网盘地址：
        链接：https://pan.baidu.com/s/1ZgJlKKm-fs1_QjpCiSGrgA 
        提取码：fudp

2.页面引用：

print.js是jQuery的一个插件，所以在引用print.js之前一定要引用jQuery

示例代码：
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>        #首先引用jQuery
        <script src="__STATIC__/admin/js/query_print.js"></script>                    #引入print.js

3.使用示例：

1.首先将要打印的区域使用div包裹起来，定义一个ID：

示例代码：
      <div id="print_html">
        <h1>我是要打印的内容</h1>
      </div>

2.定义按钮触发点击事件：

示例代码：
      <button onclick="print()">打印</button>

3.编写js代码：

示例代码：
<script>
        function print(){
            $("#print_html").print({
                globalStyles: true,                 //是否使用父文档的样式表
                mediaPrint: false,                  //是否使用含有media="print"的样式表
                stylesheet: null,                   //链接外部样式表
                noPrintSelector: ".no-print",       //非打印内容选择器
                iframe: true,                       //是否使用一个隐藏的iframe打印
                append: null,                       //后置打印的html
                prepend: null,                      //前置打印的html
                manuallyCopyFormValues: true,       //打印时是否更新表单数据
                deferred: $.Deferred(),             //在window.print()调用后reslove一个jQuery.Deferred对象
                timeout: 750,                       //超时时间
                title: null,
                doctype: '<!doctype html>'
            });
        }
</script>

4.设置纸张横向打印：

默认情况下是纸张是竖向打印的，我们可以添加css属性变成默认横向打印：

示例代码：
        <style>
           @page {
                size: A4 landscape; 
                margin: 0mm;
            }
        </style>

5.解决打印多空白页的问题：

有的时候会发现我们要打印的区域不足一个打印页，打印预览的时候却多出一个空白页，这是因为我们在页面中设置margin属性造成的，将页面所有的margin属性替换成其他属性就可以解决。

6.参考地址：

github地址：
        https://github.com/DoersGuild/jQuery.print