使用nuxt实践web打印

分享下打印场景中几种常见方式并分享一下基于已选择的方式踩的坑

打印相关知识点

  打印方式

1. 全局打印 直接使用window.print()方法调用浏览器，打印出全部打印属性🉑️识别的内容
   

2. 局部打印
    1.  innerHTML 使用getElementById("print")获取具体节点内容
    2.  iframe 使用嵌入方式
    3.  canvas 也是使用getElementById("print")获取具体节点，通过html2canvas插件渲染成pdf
   

3. 服务端使用无头浏览器生成pdf
   

  打印样式    

修改打印内容，仅在打印时生效的样式      修改打印页面样式

  打印分页

⚠️：不能对绝对定位的元素使用此属性。尽可能少的使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性  

page-break-before、page-break-after      page-break-inside

  Table打印属性

使用thead、tfoot标签实现面单每页头尾携带信息

项目实践踩坑点

项目采用第三种打印方式，使用nuxt构建ssr，输出html交由后端使用无头浏览器生成pdf

  使用nuxt注意⚠️点：

1. 在页面组件内想要服务端获取并渲染数据，需要使用asyncData。子组件中不可使用
2. 子组件中如果需要渲染页面前填充应用的状态树（store）数据，使用fetch。没有必要共享信息不使用store

  使用无头浏览器的注意⚠️点：

1. enum Media { SCREEN, PRINT }，浏览器媒体查询默认SCREEN，我们打印面单时应设置为PRINT
2. 无头浏览器选择chromium,防止兼容性问题，例如：打印分页属性