我们都知道jsPDF配合html2canvas可以将html转化为canvas，然后将canvas转为图片，最后使用jspdf将图片放到pdf中去，实现前端的pdf下载，很方便。但是我们在使用过程中会出现这样的情况，将图片放在一页，如果不超过A4纸大小（主要是高度），就没有问题，但是高度超过了，我们就必须放多页，但是放多页内容会被无情截断。
我们要实现的目标：不截断pdf，且内容完整
本人经过研究jspdf之后，整理了将html转为pdf，内容一页显示不截断的思路和代码：
思路
- 获取DOM
- 将DOM转换为canvas
- 获取canvas的宽度、高度（稍微大一点，预览）
- 将pdf的宽高设置为canvas的宽高（不适用A4纸大小）
- 将canvas转为图片
- 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
代码
document.querySelector('.download button').onclick = function(e) {
var content = document.querySelector('.content')
download(content)
}
function download(content) {
html2canvas(content, {
allowTaint: true,
scale: 2 // 提升画面质量，但是会增加文件大小
}).then(function (canvas) {
/**jspdf将html转为pdf一页显示不截断，整体思路：
* 1. 获取DOM
* 2. 将DOM转换为canvas
* 3. 获取canvas的宽度、高度（稍微大一点）
* 4. 将pdf的宽高设置为canvas的宽高
* 5. 将canvas转为图片
* 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
*/
// 得到canvas画布的单位是px 像素单位
var contentWidth = canvas.width
var contentHeight = canvas.height
console.log('contentWidth', contentWidth)
console.log('contentHeight', contentHeight)
// 将canvas转为base64图片
var pageData = canvas.toDataURL('image/jpeg', 1.0)
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
var pdfX = (contentWidth + 10) / 2 * 0.75
var pdfY = (contentHeight + 500) / 2 * 0.75 // 500为底部留白
// 设置内容图片的尺寸，img是pt单位
var imgX = pdfX;
var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
// 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
var PDF = new jsPDF('', 'pt', [pdfX, pdfY])
// 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
PDF.save('download.pdf')
})
}
页面如下
图片下面还有很多内容。
image.png
下载效果如下
image.png
总结
以上就实现了不截断pdf，一页显示所有内容。px是像素单位，pt是印刷单位，两者之间的关系和转化，大家可以自行百度。
