页面转 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'; // 将图片生成 pdfimport { 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-caplet 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 的功能，为用户提供便捷的文档下载体验。希望本文对你理解和使用该功能有所帮助，如有任何疑问，欢迎在评论区交流。