JS将HTML导出PDF

依赖包

基于jsPDF和html2canvas两个包

1
2
npm install jspdf –save-dev
npm install html2canvas –save-dev

基本思路

  1. 算出页数和每一页的宽度和高度
  2. 创建一个jsPDF实例。循环,调用html2canvas方法,渲染每一页page为canvas,并获取图片数据插入pdf中。插入之后,调用jsPDF.addPage()方法,加一页。然后,改变dom的css属性top,使其向上移动一页的距离,进入下一页。
  3. 当到达最后一页,获取最后一页的图片数据之后调用jsPDF.save()方法,保存pdf文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

/**
* @Author seminelee
* @DateTime 2017-09-01
* @param {object} dom dom
* @param {number} domWidth dom宽度
* @param {number} domHeight dom高度
* @param {number} windowWidth window.innerWidth
* @param {number} windowHeight window.innerHeight
* @param {string} fileName 导出文件名
* @return {function} [description]
*/

const html2pdf = function(dom, domWidth, domHeight, windowWidth, windowHeight, fileName){

const pageNum = Math.ceil(domHeight / windowHeight);

const a4Width = 592.28;
const a4Height = 841.89;
const imgWidth = domWidth / windowWidth * a4Width;
const imgHeight = domHeight / windowHeight * a4Height;

let pdf = new jsPDF('', 'pt', 'a4');

for ( let i= 0; i < pageNum; i++) {
dom.style.top = (- i * windowHeight) + 'px';
html2canvas(dom, {
onrendered: (canvas) => {
let pageData = canvas.toDataURL('image/jpeg', 1.0);

pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );

if (i == pageNum -1) {
pdf.save(fileName)
} else {
pdf.addPage();
}
}
})
}
dom.style.top = 0;
}

export default html2pdf;