Print.js是一个小巧的JavaScript库，在网页打印方面发挥着重要作用。在PDF打印方面，它主要用于直接在应用内打印PDF文件，无需离开界面且无需嵌入。当用户要打印服务器端生成的报告（以PDF形式返回）时，它提供了便捷方式，不过PDF文件需与应用处于同一域名下，这是由于其使用iframe加载文件受同源策略限制，可防止跨站脚本攻击。

它支持多种PDF打印方式，如简单的PDF文件打印、大文件打印时显示消息、支持base64的PDF打印等。HTML打印时，可以轻松传递要打印元素的id，能将元素以接近屏幕显示的样式打印，并创建适合打印机的格式，还可添加页眉等。对于图像打印，可以快速打印页面上的图像，能传递高分辨率图像网址以提高打印质量，也可给打印图像添加页眉，还能同时打印多个图像并应用样式。

JSON打印则提供了一种简单快速打印动态数据或JavaScript对象数组的方法，能定制数据网格样式、表头文本，还可接收原始HTML页眉。

下载并安装

1. 1. 您可以从 GitHub 版本下载最新版本的 Print.js。
   github下载
2. 2. 使用 npm 安装：

npm install print-js --save
​

3. 3. 使用 yarn 安装：

yarn add print-js
​

通过 npm 或 yarn 安装时，将库导入到您的项目中：

import print from 'print-js'
​

4. 4. 直接HTML引入

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css
​

例子

添加一个按钮来打印位于托管服务器上的 PDF 文件：

<button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF
 </button>
​

对于大文件，您可以在加载文件时向用户显示一条消息。

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
 </button>
​

该库支持base64 PDF打印：

<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 </button>
​

HTML 打印

有时我们只想打印 HTML 页面的选定部分，这可能很棘手。使用 Print.js，我们可以轻松传递要打印的元素的 ID。该元素可以是任何标签，只要它具有唯一的 ID。该库将尝试以非常接近其在屏幕上显示的方式打印它，同时，它将为其创建一种适合打印机的格式。

向 HTML 表单添加打印按钮：

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>
​

图像打印

Print.js 可用于通过传递图像 URL 快速打印页面上的任何图像。当屏幕上有多张使用低分辨率版本的图像时，此功能非常有用。当用户尝试打印所选图像时，您可以将高分辨率 URL 传递给 Print.js。

在您的页面上加载具有屏幕所需分辨率的图像：

<img src="images/print-01.jpg" />
​

在您的 javascript 中，将最高分辨率图像 url 传递给 Print.js 以获得更好的打印质量：

printJS('images/print-01-highres.jpg', 'image')
​

JSON 打印

打印动态数据或 javascript 对象数组的简单快捷方法。
我们的 javascript 代码中有以下数据集。这可能来自对服务器 API 的 AJAX 调用：

someJSONdata = [
    {
       name: 'John Doe',
       email: '[email protected]',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: '[email protected]',
       phone: '333-333-3333'
    }
 ]
​

我们可以将其传递给 Print.js：

<button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data
 </button>
​

更多例子和printJS参数请访问官网

相关链接

GitHub
printJS官网

点击打印当前页面