前端打印的相关实践

1、背景

在前端开发过程中，遇到打印相关的需求时，该如何选择打印方式？目前支持的打印方式多种多样，例如说浏览器本身支持的print方法，还有第三方的付费打印软件，当然在公司内部也有功能完整的sdk支持。那么问题就接踵而至，该如何选择哪种打印方式来匹配实际需求呢？下面本文介绍了几种打印方式，会通过其使用方式、接入成本、打印呈现样式等方面来评估各打印方式的优劣，基于此，再通过与实际需求的对比，应该就能快速选择一种打印方案了吧～

2、调研

2.1、浏览器打印

2.1.1技术方案

通过 window.print() 调用浏览器打印,会弹起打印预览的窗口

使用window.print()如何实现局部打印呢？

• 暴力替换

function innerHtmlPrint(){
    // 缓存页面内容
    const bodyHtml = window.document.body.innerHTML;
    // 获取要打印的dom
    const printContentHtml = document.getElementById("print").innerHTML;
    // 替换页面内容
    window.document.body.innerHTML = printContentHtml;
    // 全局打印
    window.print();
    // 还原页面内容
    window.document.body.innerHTML = bodyHtml;
}

• iframe

function doPrint() {
    let templateUrl = `${window.location.protocol}//${window.location.host}/page/printer/graphic/template`;
   	const iframe = document.createElement('iframe');
    iframe.src = templateUrl;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
   	iframe.contentWindow.print();
    document.body.removeChild(iframe);
}

2.1.2 优点

使用方式简单

2.1.3 缺点

1、打印的是整个网页，不能打印局部内容；

2、打印不支持自定义分页行为，默认不支持批量打印；

3、打印的时候样式有问题，所见非所得；

4、打印可以准确识别的样式单位是绝对单位（如pt、mm、cm），对相对单位识别不同打印机可能会得到意想不到的结果；

5、无法执行自动打印。

2.2、nw.js

NW.js基于Chromium 和 Node.js. NW.js利用Web技术结合Node.js及其模块进行桌面应用开发.

2.2.1 技术方案

首先需要先获取到打印机的信息，使用win.getPrinters(callback)来枚举系统中可用的打印机信息并在回调里发送json格式的打印机信息数组。

  /**
         * [{
         *     "deviceName":"EPSON_L360_Series",
         *     "printerDescription":"EPSON",
         *     "printerName":"EPSON_L360_Series",
         *     "printerOptions":{"printer-location":"EPSON","printer-make-and-model":"EPSON_L360_Series","system_driverinfo":"EPSON_L360_Series;;;"}
         * }]
         */
        nw.Window.get().getPrinters(PrinterList);

将需要打印的页面放到新窗口

// 打开并加载 url至新窗口
 nw.Window.open(templateUrl, { show: false });

执行打印时，使用window.get()获取指定window_object窗口(未指定时默认为当前窗口)的窗口对象，然后再使用print()函数执行打印，将从getPrinters()拿到的打印配置传入。

  nw.Window.get().print({
                        autoprint: true,
                        silent: true,
                        headerFooterEnabled: false,
                        landscape: false,
                        marginsType: 1,
                        copies: 1,
                        printer,
                    });

打印完毕后，将打开的窗口关闭

nw.Window.get().close();

2.2.2 优点：

1. 可以获取到电脑连接打印机的列表

2. 支持html打印

2.2.3 缺点：

1. 该方法仅支持在壳子中使用，浏览器中是无法直接调用nw的方法获取打印机列表和执行打印操作的。

2. 对尺寸的支持欠缺，无法精准适配自定义尺寸。

2.3、插件打印

在代码中引入插件或安装本地插件来完成打印，不需要依赖打印机的驱动。

市面上的一些打印插件有C-lodop、HttpPrinter、HiPrint等。

2.3.1 如下表格为各插件的优缺点，可以根据实际情况选择一款适合的插件开发：

插件	优势	劣势	是否收费	建议
C-lodop	功能强大	兼容性不是很好，你想在保证清晰度的情况下，没办法写css3，画个圆角边框都不行 ，依赖于系统IE版本，IE9以下，打出来的东西乱七八糟。	✅	使用之前，仔细研究下官网给的demo，这个插件的原理是，在页面嵌入一段js，和本地客户端通过webscoket进行通信。
HttpPrinter	一直有人维护，目前最新版本是v4.0.0.79 支持网页静默打印 打印机：只要是能用的打印机,都支持,针式打印机、激光打印机、小票打印机,证卡打印机等等	需要下载插件	✅
HiPrint	不需要安装客户端	没有npm包，依赖于jQuery
光速云打印	支持windows\mac\linux\安卓 操作系统 浏览器打印 PDF/HTML/图片/Word 文档/Excel/PPT/指令打印/自定义绘图/微软报表	需要下载插件 可以免费使用，但有水印，可以购买无水印的插件	免费试用有水印，但功能都能用 ✅	可以试用下官网提供的demo

2.3.2 优点：

1、功能强大，可以调用到系统底层的东西，比如获取系统打印机列表，设置默认打印机等

2、可以实现无预览打印

2.3.3 缺点：

1、需要安装客户端，大多收费

2、第三方插件，无技术支持，出现问题难以解决

3、本地插件的方式基本只有window系统版本