如何将HTML文件导出为PDF文档这个问题看似是很简单的，很多同学一上来就能给出解决方案：将报表生成专门的打印HTML页面，然后按 Ctrl+P 调用浏览器本身打印功能去打印。 但很显然这种方式存在的问题是不同分辨率的显示器，页面效果不一，需要专门设定打印尺寸，使用起来不够方便，功能上线后，一直遭到甲方吐槽...所以，我们就要另辟蹊径，重新找个方法来实现HTML文件导出为PDF文档。

首先是轮子工具的选择，目标很明确，将HTML内容导出为PDF。 时间有限，先找轮子，一通谷歌后选定了前端工具 jspdf。

解决方案解析：

先上代码：

html2canvas(document.body, {
onrendered:function(canvas) {
// 要输出的 PDF 每页的宽高尺寸，单位是 pt
let pageWidth = 841.89
let pageHeight = 592.28
// 要打印内容，转换成 canvas 图片后的宽高尺寸
let contentWidth =  canvas.width*3/4
let contentHeight = canvas.height*3/4
// 将要打印内容的图片，等比例缩放至宽度等于输出时 PDF 每页的宽度，此时的图片宽
let imgWidth = pageWidth
// 将要打印内容的图片，等比例缩放至宽度等于输出时 PDF 每页的宽度，此时的图片高
let imgHeight = pageWidth / contentWidth * contentHeight
// 起始内容截取位置
let position = 0
// 剩余未打印内容的高度
let leftHeight = imgHeight
// 获取打印内容 canvas 图片元素
let pageData = canvas.toDataURL('image/jpeg', 1.0)
// 初始化 pdf 容器，三个参数分别是：纸张方向(填'',则是横向)、打印单位、纸张尺寸
let PDF = new JsPDF('landscape', 'pt', 'a4')
// 循环截取打印内容并添加进容器
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= pageHeight
if (leftHeight > 0) {
PDF.addPage()
}
}
}
// 将容器中的内容输出为 PDF 文档
pdf.save('content.pdf');
}
})

函数逻辑比较简单，不做过多解释。主要提两点：

修复了一个小bug，原函数忽略了单位转换问题（px 要转 pt），存在导出的 PDF 最后会有空白页。

原函数中 leftHeight 用的是 contentHeight，也就是 canvas 图片的未缩放换算前的高。这就导致 pageHeight 需要再换算才能得到，这增加了函数逻辑复杂度。其实 leftHeight 可以设为 imgHeight，即缩放换算后的高，而pageHeight 就设为 PDF 单页的高，这样代码逻辑更清晰。

这函数核心逻辑就三步：

1.获取要打印内容区域的宽高，并等比缩放直至其宽度等于输出 PDF 的页面的宽度，以此获得缩放后的打印内容图片宽高（imgWidth, imageHeight）；

2.按单页 PDF 的宽高 (pageWidth, pageHeight)，循环截取缩放后的打印内容图片，并将每次截取的内容添加至 PDF 对象容器。(每截取一次，就是一页 pdf)；

3.将 PDF 对象容器中的内容，输出为 PDF 文档。

我们只要按照上述的步骤来操作，就能成功地将HTML文件导出为PDF文档了。后续的操作我们可以在动力节点在线的HTML视频课程中查找完整的demo。