window.print()前端实现网页打印功能详解

教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/

目录

• 前言
• 一、print()方法
• 二、打印样式
• 三、打印指定区域部分内容
• 四、强制插入分页
• 五、设置打印布局（横向、纵向、边距）
• 六、去除浏览器默认页眉页脚
• 七、打印方法封装
• 总结 

  前言

  print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。

  一、print()方法

  print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。

  
  
    
    printDemo
  
  
    
    内容
    
      function printpage() {
        window.print()
      }
    
  
  

  

  二、打印样式

  直接调用print()方法去打印网页内容，我们会发现，事先调整好的布局和样式都没法实现，那么有哪些方法可以帮助我们改善打印的用户体验呢？

  【1】使用打印样式表

  配置一份打印样式表print.css，引入到HTML文档，在 上加上一个 media="print" 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中