页面转 PDF 功能的实现思路与使用方法
引言
在 Web 开发中，有时我们需要将页面的特定部分转换为 PDF 格式，以便用户下载和保存。本文将详细介绍如何使用 html2canvas 和 jspdf 这两个强大的库来实现这一功能，并且结合实际代码讲解其实现思路与使用方法。完整源码（src/utils/htmlToPdf.js）：https://gitcode.com/Jiaberrr/vue3-pc-template/overview
一、前置准备
首先，确保你的项目中已经安装了 html2canvas 和 jspdf 库，以及 element-plus（用于展示加载状态）。在代码中引入相关依赖：
import html2canvas from 'html2canvas'; // 将 html 页面转换成图片
import jsPDF from 'jspdf'; // 将图片生成 pdf
import { ElLoading } from 'element-plus';二、代码实现思路
（一）核心函数 downloadPdf
我们封装了一个名为 downloadPdf 的异步函数，它接收两个参数：elementId 和 pdfName。
export async function downloadPdf(elementId, pdfName) {
//...
}- elementId：用于指定页面中要转换为 PDF 的元素（盒子）的 ID，该盒子内部包含了我们想要生成 PDF 的内容。
- pdfName：生成的 PDF 文件的名称。
（二）加载状态展示
在函数内部，首先使用 ElLoading 组件来显示一个加载提示，让用户知道正在进行下载操作。
const loadingInstance = ElLoading.service({
lock: true,
text: '下载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
});（三）页面样式调整
获取要转换的 DOM 元素，并将其背景设置为白色，同时调整宽度为 190mm，以适配后续的 A4 纸布局。这里还保存了原始的样式，以便在转换完成后恢复。
let pdfDom = document.getElementById(elementId);
pdfDom.style.background = '#FFFFFF';
const originalStyle = pdfDom.getAttribute('style');
pdfDom.style.width = '190mm';（四）延迟执行与页面截图
设置一个短暂的延迟（100 毫秒）后执行 htmlToCanvas 函数，开始对指定元素进行截图操作。这是因为页面样式调整可能需要一点时间生效，确保截图的准确性。
setTimeout(() => {
htmlToCanvas(pdfDom);
}, 100);（五）图片转 PDF 核心逻辑
- htmlToCanvas 函数：使用 html2canvas 库对指定的 DOM 元素进行截图，它接收一些配置参数，如关闭日志输出（logging: false）和启用跨域资源加载（useCORS: true）。当截图成功后，获取到 canvas 对象，接着创建一个 jsPDF 实例，设置为纵向 A4 纸布局。
function htmlToCanvas(pdfDom) {
html2canvas(pdfDom, {
logging: false,
useCORS: true
}).then((canvas) => {
// eslint-disable-next-line new-cap
let pdf = new jsPDF('p', 'mm', 'a4');
canvasToPdf(canvas, pdf);
//...后续操作
});
}- canvasToPdf 函数：这是将 canvas 图片转换为 PDF 内容的关键函数。首先获取 canvas 的 2D 绘图上下文，定义 A4 纸的尺寸（考虑四边 10mm 边距，显示区域为 190 x 277）。然后通过循环，按照 A4 纸的显示比例，将 canvas 中的内容逐页添加到 PDF 中。如果内容高度超过一页，会自动添加新的页面，确保所有内容都能完整转换。
function canvasToPdf(canvas, pdf) {
let ctx = canvas.getContext('2d');
let a4w = 190;
let a4h = 277;
let imgH = Math.floor(canvas.width / a4w * a4h);
let renderH = 0;
while (renderH < canvas.height) {
let page = document.createElement('canvas');
page.width = canvas.width;
page.height = Math.min(imgH, canvas.height - renderH);
page.getContext('2d').putImageData(ctx.getImageData(0, renderH, canvas.width, Math.min(imgH, canvas.height - renderH)), 0, 0);
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));
renderH += imgH;
if (renderH < canvas.height) {
pdf.addPage();
}
}
}（六）收尾操作
在 PDF 生成并保存后，关闭加载提示，同时将之前转换的 DOM 元素的样式恢复为原始状态。
loadingInstance.close();
pdf.save(pdfName + '.pdf');
if (originalStyle) {
pdfDom.setAttribute('style', originalStyle);
}三、使用方法
在你的项目中，当需要将某个页面区域转换为 PDF 时，只需按照以下方式调用 downloadPdf 函数：
// 假设页面中有一个 ID 为'myContent' 的 div 元素，要将其内容转换为 PDF 并命名为'myDocument'
downloadPdf('myContent','myDocument');通过以上步骤，就可以轻松实现页面转 PDF 的功能，为用户提供便捷的文档下载体验。希望本文对你理解和使用该功能有所帮助，如有任何疑问，欢迎在评论区交流。