通过 window.print() 局部打印，可以完成基本的 web 打印功能。但样式之类手动设计起来比较复杂，可以使用一些插件。

print-js ：

官网： https://printjs.crabbly.com/
github : https://github.com/crabbly/Print.js

可以打印 PDF，图片，HTML，JSON 等，使用很简单，而且可以使用 npm 安装，即可以直接使用到 Node 中，很是方便。
不过，打印 JSON 数据时，自定义配置不是很多，不好打印比较复杂的表单之类的（也有可能是自己还没熟悉的缘故）。

hiprint :

官网： http://hiprint.io/
github： https://github.com/hinnncom/hiprint

可以打印 JSON 数据，可以生成 PDF，功能比较齐全。而且，可以用拖拽的方式设计打印模板，按参数填入数据，很是方便。
（依赖于 jQuery）

下面是项目中使用 hiprint 的一个场景。

Vue 项目，简单的打印一些查询到的表格、表单。

设计

需求：
vue 监听打印按钮点击事件，调用方法，填入当前 Vue 中的数据，生成打印页面，预览，打印。

思路一：

  1. .vue 文件中 import 一个自定义 hiprint-sample.js 文件，hiprint-sample.js 文件中定义方法，动态加载相关的依赖文件：jQuery, css, hiprint 等等。
  2. 在打印按钮事件方法中，调用 hiprint-sample.js 中的加载方法，等待加载所有需要的 css, js 文件。完成后，会有 hiprint 全局对象。
  3. hiprint.init() 初始化，使用当前 Vue 中的数据初始化模板，填充数据，生成预览页面、打印等等。

上面的思路没有问题，然而实际使用时，出现了问题，类似 this.getHtml(...).hiwprint is not a function 。没解决掉 (＃￣～￣＃) 。

思路二：

  1. .vue 组件的打印按钮事件方法中，将本次打印时需要的数据存入 sessionStorage ，然后打开新页面（一个单独的静态文件 print.html）。
  2. print.html 中，引入了 hiprint 相关的 css，js 文件。print.html 中，读取 sessionStorage 中存放的数据，用这些数据来生成打印页面，打印预览，打印等。

（打印的内容如果比较多，在 sessionStorage 中存放查询参数，在 print.html 中，用该参数重新查询数据）

实现

由于 思路一 的问题没解决，使用了 思路二。所有的打印都会跳转到 print.html 页面，根据 sessionStorage 中的参数，使用不同模板、数据生成打印页面，打印。