使用jspdf插件将网页中的内容导出为高保真的pdf文件

使用jspdf插件将网页中的内容导出为高保真的pdf文件

1. 将网页中的内容导出为pdf文件的四种方式比较

第二种 iText 和 第三种 wkhtmltopdf 需要后端java和服务端处理，这里就不说。

2. 第一种方式：html2canvas + jspdf 导出网页内容

第一种方式中还可以分为两种方式：

• 一种是通过 html2canvas 先将 html 内容转化成 canvas 画布，然后再将画布转成 jpeg 图片，最后，再将所有的jpeg图片拼接起来通过 jspdf 保存为pdf文件并下载下来。
• 另一种是 通过 jspdf.html() 方法把需要导出为pdf的内容的dom元素保存并下载下来。

2.1 网页内容拼接失真导出pdf

这种方式有几种缺陷：

• 图片会被压缩或放大，导致图片上的内容会失真出现模糊的现象。
• 将要导出的HTML内容必须要在浏览器中显示，不可设置display: none; visiable: hidden;等样式，否则导出的PDF为白板。
• 如果需要导出自定义的样式，则需要复制一份HTML并修改自定义的样式，然后新窗口打开，然后调用导出PDF的方法，导出PDF，这里会涉及一个加载渲染问题，必须要等HTML加载和渲染完成后才可导出PDF，否则导出的PDF是不完整。

2.1.1 安装和引入 html2canvas 和 jspdf

# 安装
$ npm install html2canvas jspdf
1
2

第一种引入方式

import {
    jsPDF as JsPDF } from 'jspdf'
import html2Canvas from 'html2canvas'
1
2
3

第二种引入方式

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js">script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js">script>
1
2

2.1.2 JsPDF 参数说明

JsPDF 一共有4个可选参数

const doc = new JsPDF('p', 'px', 'a4')
1

• arugments[0]: 表示pdf的打印方向，默认是p，纵向
• arguments[1]: 表示pdf的单位，默认是mm，毫米；可选值有pt, mm, cm, in, px, pc, em, ex。
• arguments[2]: 表示打印版式，默认'a4'，可选值有a0~a10,b0~b10,c0~c10,dl,letter,government-letter,legal,junior-legal,ledger,tabloid,credit-card。
• arguments[4]: 表示是否只在PDF中输入字体，默认 false。

doc.save('xxx.pdf') 参数说明

doc.save(filename, flag) 方法一共有两个参数。

• arguments[0]: PDF文件输入的名称。
• arguments[1]: 是否返回 promise 对象，默认 false。

2.1.3 html2canvs 参数说明

html2canvas(options) 一共有20个参数属性。

• allowTaint: 是否允许跨原点图像污染画布，默认 false。
• backgroundColor: 画布背景色, 值为 null 时为透明色，默认 #ffffff。
• canvas: 用作绘图基础的现有画布元素，默认 null。
• foreignObjectRendering: 如果浏览器支持，是否使用ForeignObject渲染，默认 false。
• imageTimeout: 加载映像的超时（毫秒）默认 15000。设置为0以禁用超时。
• ignoreElements: 回调函数，用于从渲染中移除匹配元素，默认 (element) => false。
• logging: