相关推荐recommended
一文弄懂window.print()打印
作者:mmseoamin日期:2023-11-30

一文弄懂window.print 打印

  • 前言
    • window.print() 默认效果缺陷
    • 一、打印样式
    • 二、打印指定区域内容
      • 1. 对容器进行打印
      • 2. 对容器内的部分内容进行打印
      • 3. 监听打印前后事件
      • 4. iframe
      • 三、强行插入分页
      • 四、打印设置
      • 五、最佳实践(React)
        • 1. 背景:
        • 2. 思路:
        • 3. 实现:
        • 六、如果干预打印分页
        • 七、 window.print去除浏览器默认页眉页脚
          • window.print() 实现A4纸张打印及去掉页眉页脚及打印链接
          • window.print() 去掉页眉页脚及打印链接
          • 八 、IE浏览器打印预览 :使用html 标签引入Webbrowser控件

            一文弄懂window.print()打印,在这里插入图片描述,第1张

            https://developer.mozilla.org/en-US/docs/Web/API/Window/print

            前言

            一般信息填写类的需求页面,都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图,而打印则是基于预览来生成 PDF 文件。

            浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。

            window.print() 默认效果缺陷

            1.打印控件默认没给分页,就只显示了一页

            2.dom 布局和样式很容易发生错位、丢失

            3.我想要局部打印,但默认是获取的整个 body.innerHtml 的内容

            一、打印样式

            默认情况下,基于页面上的内容,会将元素,布局和样式都进行打印;

            如果仅想在打印上设置特殊样式,可以通过以下方式:

            1.使用打印样式表:

             
            

            2.使用媒介查询:

            @media print {p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;}
            } 
            

            3.使用内联 media 属性

             
            

            默认情况下,元素的背景色不会被打印,可通过设置属性来支持:

            div{// Chrome、Safari 等 webkit 浏览器内核-webkit-print-color-adjust: exact;// 火狐print-color-adjust: exact;color-adjust: exact;
            } 
            

            二、打印指定区域内容

            默认情况下,调用 window.print() 会对整个 document.body 进行打印,当需要打印指定容器内容时,可以通过以下几种方式:

            1. 对容器进行打印

            这是一个段落

            这是一个标题

            2. 对容器内的部分内容进行打印

            当只需要打印容器内某一部分内容时,可以通过注释标识进行截取。
            

            这是一个段落

            这是一个标题

            3. 监听打印前后事件

            通过监听打印前后事件window.onbeforeprint、window.onafterprint ,对不需要进行打印的元素进行隐藏和放开隐藏。

            
            

            这是一个段落

            这是一个标题

            4. iframe

            上面几种方式都在当前窗口进行打印,并且都需要更改 document.body 内容,这会出现视图切换,带来的体验不是太好。

            下面我们借助 iframe 来实现打印,并且不影响当前视窗的内容展示。

            
            	

            这是一个段落

            这是一个标题