在Web开发中，将HTML页面导出为PDF文件的需求越来越普遍。在这里，我们将使用两个强大的JavaScript库——html2canvas和jsPDF，来实现这个功能。html2canvas能够将HTML元素渲染成Canvas图像，而jsPDF则能将Canvas元素转换为PDF文档。下面，我们将一步一步地实现这个过程，并附上代码示例。
环境准备
在开始之前，确保已经引入了这两个库。我们可以通过CDN来引入它们。在你的HTML文件中添加以下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML转PDF示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</head>
<body>
<div id="content">
<h1>欢迎使用HTML转PDF</h1>
<p>这是一个简单的示例，演示如何将这段内容导出为PDF文件。</p>
</div>
<button id="download">下载PDF</button>
<script src="script.js"></script>
</body>
</html>
创建导出PDF的逻辑
接下来，我们在script.js文件中实现核心逻辑。我们需要监听“下载PDF”按钮的点击事件，然后通过html2canvas获取到指定的HTML内容，并通过jsPDF生成PDF文件。
以下是script.js的代码实现：
document.getElementById("download").addEventListener("click", function() {
// 使用html2canvas将内容渲染为canvas
html2canvas(document.getElementById("content")).then(function(canvas) {
// 获取canvas的图像数据
var imgData = canvas.toDataURL("image/png");
// 创建PDF对象
var pdf = new jsPDF('p', 'pt', 'a4');
// 页面宽度和高度
var pdfWidth = pdf.internal.pageSize.getWidth();
var pdfHeight = pdf.internal.pageSize.getHeight();
// 计算图像的宽度和高度
var imgWidth = 220; // 设置图像在PDF中的宽度
var imgHeight = (canvas.height * imgWidth) / canvas.width; // 等比例缩放高度
// 将图像添加到PDF文档中
var position = 0; // 用于控制图像y坐标
pdf.addImage(imgData, 'PNG', 15, position, imgWidth, imgHeight);
// 保存PDF文件
pdf.save("下载的文档.pdf");
});
});
代码解析
-
html2canvas：这个库会将指定的DOM元素（在这里是
#content）渲染为一个Canvas对象。在.then()回调中，我们可以处理生成的canvas。 -
toDataURL：将Canvas转换为数据URL格式的图像。我们选择PNG格式。
-
jsPDF：我们创建一个新的jsPDF实例，之后将Canvas图像插入到PDF文档中。在这里，我们设定了图像的宽度为220，并根据图像的宽高比计算高度。
-
addImage：将图像添加到PDF文档中，并定义图像的位置和尺寸。
-
save：最后，通过调用
save方法将生成的PDF文件保存到用户本地，文件名为“下载的文档.pdf”。
注意事项
-
跨域问题：如果你的页面中有跨域的图像资源，确保它们是可获取的，或者可以使用CORS策略解决该问题。
-
PDF大小：生成的PDF文件的大小和质量可能会受到Canvas图像的分辨率影响，可以通过调整IMG_WIDTH和IMG_HEIGHT来优化。
-
兼容性：部分旧版本浏览器可能不支持html2canvas和jsPDF，建议使用现代浏览器进行测试。
通过以上步骤和代码示例，我们可以轻松地将HTML页面导出为PDF文档。这种方法适用于各类Web应用，尤其是需要生成报告、发票等功能的场景。希望这个简单的示例能帮助到你！
