Vue3打印插件Print.js的使用

一、Print.js

在使用 Print.js 插件之前，我们可以通过下面的链接先了解和认识一下这个 JavaScript 插件。

官方地址：Print.js - Javascript library for HTML elements, PDF and image files printing
GitHub地址：GitHub - crabbly/Printjs: A tiny javascript library to help printing from the web

如何认识和快速上手 Print.js，我们可以从官网的内容开始阅读，在官网中有很详细的介绍和使用例子，虽然是英文版的。

Print.js 打印插件包括了 PDF 打印、HTML 打印、JSON 打印、图像打印等。

二、安装

2.1、 js文件

下载最新版本的 Print.js，点击【前往】

2.2、npm

使用 npm 进行安装，请执行以下操作：

 npm install print-js --save
1

使用 yarn 安装：

  yarn add print-js
1

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

import print from 'print-js'
1

2.3、CDN

使用在线的 CDN：

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

三、使用

3.1、网页（HTML）打印

有时我们只想打印HTML页面的选定部分，这可能很棘手。使用 Print.js，我们可以轻松传递要打印的元素的 id。该元素可以是任何标记，只要它具有唯一的 id。图书馆将尝试非常接近它在屏幕上的外观进行打印，同时，它将为其创建打印机友好的格式。

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

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>
1
2
3
4
5
6
7

<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header
 </button>
1
2
3

3.2、PDF 打印

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件，无需离开界面，也不使用嵌入。对于用户不需要打开或下载 PDF 文件