在使用html2canvas和jsPDF导出PDF时，常常会遇到内容分页截断的问题，导致生成的PDF文档中的内容被分割，不完整，这对用户来说是非常不友好的体验。本文将介绍一种有效的方法来解决这个问题，并给出相应的代码示例。
一、问题分析
html2canvas用于将HTML元素转换为Canvas，而jsPDF则用于将Canvas内容导出为PDF文件。当HTML内容较长，超过了一页的高度时，html2canvas生成的Canvas将无法完整地渲染所有的内容，这会导致在导出PDF时，某些内容可能会被截断，无法完整显示。
二、解决方案
我们可以通过对页面进行分割，并逐步将每一部分绘制到PDF中来解决这个问题。具体步骤如下：
- 获取需要导出的HTML元素：选择一个包裹需要导出内容的Div。
- 计算元素的高度和宽度：确定内容的总高度，以便在生成PDF时进行分页处理。
- 使用html2canvas进行绘制：将每一部分内容绘制为Canvas，并使用jsPDF将其保存为PDF。
三、代码示例
以下是一个完整的代码示例，展示了如何将HTML元素分割并导出PDF：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF导出示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="content" style="width: 210mm; margin: auto; padding: 20px;">
<h1>测试标题</h1>
<p>这里是一些示例内容...</p>
<p>这里是一些示例内容...</p>
<!-- 可重复增加内容 -->
<p style="height: 1000px;">这里是一些示例内容...</p>
</div>
<button id="download">导出PDF</button>
<script>
document.getElementById('download').addEventListener('click', function () {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'mm', 'a4');
const content = document.getElementById('content');
const contentHeight = content.offsetHeight;
const a4Height = pdf.internal.pageSize.height; // A4纸型高度
let position = 0; // 当前绘制位置
let pageCount = Math.ceil(contentHeight / a4Height);
for (let i = 0; i < pageCount; i++) {
// 使用html2canvas生成canvas
html2canvas(content, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
// 计算当前绘制区域
pdf.addImage(imgData, 'PNG', 0, position, 210, a4Height, undefined, 'FAST');
position -= a4Height;
// 如果还有页面，继续添加
if (i < pageCount - 1) {
pdf.addPage();
}
}).then(() => {
// 最后生成PDF下载
if (i === pageCount - 1) {
pdf.save('export.pdf');
}
});
}
});
</script>
</body>
</html>
四、代码解析
- 准备HTML结构：我们创建一个包含要导出内容的
div，然后在页面中添加一个按钮，用于触发PDF导出功能。 - 设置事件监听器：点击按钮后，计算内容高度和A4纸的高度，以便进行分割。
- 循环处理分页：通过循环，将每一部分内容绘制到PDF中，如果还有页数，则添加新页。
- 保存PDF：所有内容绘制完成后，调用
pdf.save方法导出PDF。
五、总结
通过上述方法，可以有效解决html2canvas和jsPDF在导出PDF时内容分页截断的问题。我们通过合理的布局和循环处理，将长内容成功导出为完整的PDF文件。这种方法适用于各种内容的场景，用户可以根据自己的需求进行调整和优化。希望本文能够帮助到你！
