2023

一、 需求期望

根据需求生成指定html结构，通过web端调用打印功能将其或者指定区域打印出来

二、 打印方式

1. 预览打印

  点击打印按钮以后，出现浏览器自带的打印预览设置面板，点击确认，进行页面打印

2. 直接打印（静默打印）

  无预览页面展示，直接调用打印机，打印相应内容

  注：预览打印方式在交互方式上不支持批量打印

三、 预览打印方式—实现方案

1. 基于Dom结构预览打印

  a) 整个页面全部打印

    i. 原理：调用window.print()

    ii. 优点：

      1. 无兼容性问题，展示效果完美，页面整体打印

    iii. 缺点：

      1. 无法指定区域打印，会打印当前全页面内容

  b) 预览打印指定区域

    i. 当前窗口直接打印指定区域

      1. 原理：

代码示例：

      2. 缺点：

        a) 实现方式的特殊性，会导致当前页面状态重置，用户体验不好

    ii. 打开新窗口，在其中预览指定内容然后打印

    iii. 当前窗口内嵌iframe，或者弹框iframe，在iframe中预览指定内容，然后打印

      1. 原理：

代码示例：

      2. 优点

        a) 打开新窗口和当前窗口内嵌iframe方式，可以指定打印区域

        b) 不会影响当前页面的页面状态

      3. 缺点

        a) 打开新窗口和当前窗口内嵌iframe方式，都是产生了新窗口，新窗口不会复用当前窗口的css样式，需要为新窗口和iframe注入打印内容的css样式

        b) 获取指定打印区域css样式，有很多不确定因素

    iv. 使用print.js插件

      1. Print.js:

        a) 大小：128 kB

        b) Github-star：3.6k

      c) 仓库地址：https://github.com/crabbly/Print.js

      文档地址：https://printjs.crabbly.com/#documentation

      2. 原理：

        原生js，将打印模块的dom和style样式（style/link）写入iframe，然后调用document.execCommand(”print”)进行打印

代码示例：

      3. 优点：

        a) 逻辑简单，展示效果完美

        b) 支持打印的类型多：PDF、HTML、IMAGE、JSON

        c) 支持行内样式与外联样式，再也不用在DOM元素上写满样式了

        d) 兼容性好，除了IE不支持PDF和IMAGE打印外，其余主流浏览器全部支持

      4. 缺点：

        a) 需要引入第三方插件，受控性不友好

        b) 可能会出现的样式异常

        c) 无法直接打印/静默打印，因为是调用chrome打印，还是会弹出打印预页面

2. 将Dom结构转换为pdf预览打印

    a) 原理：

      html2canvas+jsPDF 通过html2canvas将遍历页面打印元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf，插入到iframe，然后打印

代码示例：

    b) 优点：

      i. 可以设置分页和不分页

      ii. 可以对多页内容添加页眉页脚

    c) 缺点：

      i. 需要引入两个第三方插件html2canvas+jsPDF

      ii. 前端生成pdf不太友好，会有一定的性能问题

      iii. 由于浏览器的样式差异化，转换后可能会出现样式不统一问题

      iv. 分页逻辑不好控制，会出现展示效果不理想

3.将Dom结构转换为image，然后预览打印

  a) 原理：

    将打印内容html利用html2canvas生成canvas 通过canvas.toDataURL('image/jpeg', 1.0)生成图片，插入到iframe中预览打印

代码示例：