html 转 pdf
使用案例
导出当前页面为 PDF:
实现方式
当需要实现将 HTML 内容转换为 PDF 文件时,可以结合 html2canvas
库来实现。
html2canvas
可以将 HTML 元素渲染为 Canvas,并将 Canvas 转换为图像格式,进而可以配合其他库实现生成 PDF 文件的功能。
以下是使用 html2canvas
结合 jsPDF
库生成 PDF 文件的一般流程:
1. 安装 html2canvas 和 jsPDF 库
您可以通过 npm 安装这两个库。
bash
npm install html2canvas jspdf --save
2. 编写 JavaScript 代码
在您的项目中编写以下 JavaScript 代码来实现 HTML 转 PDF 的功能。
javascript
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
window.convertToPdf = async () => {
const element = document.querySelector("#pdf-container"); // 目标 DOM 元素
const canvas = await html2canvas(element, {
scale: 1.5,
allowTaint: true,
}); // 使用 html2canvas 将元素转换为 Canvas
const pdf = new jsPDF("p", "mm", "a4"); // 创建一个新的 PDF 文档
const pdfWidth = pdf.internal.pageSize.getWidth(); // 计算 PDF 页面高度
const pdfHeight = pdf.internal.pageSize.getHeight(); // 计算 PDF 页面宽度
const imgUrls = getImgParts(canvas, pdfWidth / pdfHeight);
// 加到PDF的不同页面上
const n = 10; // PDF 页面边缘的空白区域
imgUrls.forEach((canvas, index) => {
const imgData = canvas.toDataURL("image/png");
index && pdf.addPage(); // 添加新的页面
pdf.addImage(imgData, "PNG", n, n, pdfWidth - n * 2, pdfHeight - n * 2); // 将子图像添加到PDF中
});
pdf.save(document.title + ".pdf"); // 保存PDF文件
};
// 把长图按A4纸比例拆分成多张画布
const getImgParts = (canvas, radio) => {
const { width, height } = canvas;
const subHeight = Math.floor(width / radio); // 子画布的高度
const total = Math.ceil(height / subHeight);
const list = [];
for (let i = 0; i < total; i++) {
const subCanvas = document.createElement("canvas");
subCanvas.width = width;
subCanvas.height = subHeight;
const context = subCanvas.getContext("2d");
context.drawImage(canvas, 0, -i * subHeight);
list.push(subCanvas);
}
return list;
};
3. 示例 HTML 元素
在 HTML 文件中设置一个要转换为 PDF 的元素。
html
<div id="pdf-container">
<!-- 这里是要转换为PDF的内容 -->
</div>
这样,当运行页面上包含以上 JavaScript 代码的脚本时,会将指定 HTML 元素转换为 Canvas,然后再将 Canvas 转换为 PDF 文件并下载。
请注意,使用 html2canvas
和 jsPDF
结合生成 PDF 的方式依赖于浏览器对 Canvas 和 PDF 的支持。在某些情况下,特别是处理复杂样式和排版时,可能会存在一些限制。如果遇到问题,可以尝试调整样式、元素布局等,以使转换过程更顺利。