前端PDF导出完全指南：JSPDF与HTML2Canvas深度解析与实战（上）

优质文章学习记录

08 Apr 2026 — 17 min read

前言：为什么需要前端PDF导出？

在现代Web开发中，将网页内容导出为PDF是一项常见但颇具挑战的需求。无论是生成报告、发票、合同还是数据可视化图表，前端PDF导出都能为用户提供便捷的离线查看和打印体验。传统的PDF生成通常需要在后端完成，但随着前端技术的发展，现在我们可以直接在浏览器中实现高质量的PDF导出功能。

本文将深入探讨两个核心工具——JSPDF和HTML2Canvas，通过详细的原理分析、实战案例和最佳实践，帮助您掌握前端PDF导出的核心技术。

第一部分：工具介绍与技术选型

1.1 JSPDF：轻量级PDF生成库

JSPDF是一个纯JavaScript实现的PDF生成库，它不依赖任何服务器端组件，完全在客户端运行。这个库最初发布于2010年，经过多年的发展，已经成为前端PDF生成的事实标准。

主要特性：

纯客户端运行：不需要服务器支持
轻量级：压缩后仅约60KB
丰富的API：支持文本、图片、形状、字体等
多语言支持：包括中文在内的多种语言
插件系统：可通过插件扩展功能

基本使用：

javascript

// 最简单的PDF生成示例 const doc = new jsPDF(); // 添加文本 doc.text('Hello World!', 10, 10); // 保存PDF doc.save('document.pdf');

1.2 HTML2Canvas：网页截图神器

HTML2Canvas是一个强大的JavaScript库，它可以将HTML元素渲染为Canvas。虽然名字中包含"canvas"，但它实际上是通过模拟浏览器渲染引擎来实现HTML到Canvas的转换。

工作原理：

解析目标元素的CSS样式
克隆DOM节点并应用样式
使用Canvas 2D API绘制每个节点
处理图片、渐变、阴影等复杂样式

技术特点：

基于Canvas：输出为标准Canvas元素
样式支持：支持大部分CSS属性
跨域处理：可以配置跨域图片加载
异步处理：使用Promise API

1.3 为什么选择这两个库？

组合优势：

JSPDF擅长PDF操作：创建、编辑、保存PDF文档
HTML2Canvas擅长网页渲染：准确捕获网页视觉状态
完美互补：HTML2Canvas生成图片，JSPDF将图片转为PDF

适用场景对比：

场景	推荐方案	理由
简单文本PDF	纯JSPDF	轻量、快速、代码简洁
表格报表	JSPDF + 表格插件	结构化数据友好
复杂网页截图	HTML2Canvas + JSPDF	保留视觉样式
大量数据导出	后端生成	性能更好

第二部分：JSPDF深度解析

2.1 核心API详解

2.1.1 初始化与页面设置

// 创建PDF实例 const doc = new jsPDF({ orientation: 'p', // 方向：p-纵向，l-横向 unit: 'mm', // 单位：pt, mm, cm, in format: 'a4', // 格式：a3, a4, a5, letter等 compress: true, // 是否压缩 precision: 16 // 浮点数精度 }); // 页面尺寸获取 const pageWidth = doc.internal.pageSize.getWidth(); const pageHeight = doc.internal.pageSize.getHeight(); // 添加新页面 doc.addPage(); // 删除页面 doc.deletePage(2); // 设置页面背景色 doc.setFillColor(240, 240, 240); doc.rect(0, 0, pageWidth, pageHeight, 'F');

2.1.2 文本处理

// 基本文本设置 doc.setFont("helvetica"); // 字体 doc.setFontSize(16); // 字号 doc.setTextColor(0, 0, 0); // 颜色 doc.setFontStyle("bold"); // 样式：normal, bold, italic, bolditalic // 添加文本 doc.text("单行文本", x, y); doc.text("多行文本", x, y, { maxWidth: 100, // 最大宽度 align: 'left', // 对齐：left, center, right baseline: 'top' // 基线：top, middle, bottom }); // 自动换行文本 const lines = doc.splitTextToSize( "这是一个很长的文本，需要自动换行显示", pageWidth - 40 ); doc.text(lines, 20, 30); // 多行文本带行高 const text = "第一行\n第二行\n第三行"; doc.text(text, 20, 50, { lineHeightFactor: 1.5 }); // 旋转文本 doc.textWithRotation("旋转文本", 100, 100, 45); // 旋转45度

2.1.3 中文支持

// 添加中文字体 // 1. 首先需要加载字体文件 const font = 'AAEAAAAQAQAABAAAR0RFRgE...'; // Base64编码的字体 // 2. 添加到JSPDF doc.addFileToVFS('chinese-normal.ttf', font); doc.addFont('chinese-normal.ttf', 'chinese', 'normal'); // 3. 使用中文字体 doc.setFont('chinese'); doc.text('中文字体测试', 20, 20); // 或者使用内置的亚洲字体 doc.setFont('simhei'); doc.setFontSize(16); doc.text('使用黑体显示中文', 20, 40);

2.1.4 图片处理

// 添加图片 const imgData = 'data:image/png;base64,iVBORw0KGgo...'; doc.addImage(imgData, 'PNG', 15, 40, 180, 160); // 完整参数 doc.addImage({ imageData: imgData, x: 15, y: 40, width: 180, height: 160, compression: 'FAST', // 压缩等级：NONE, FAST, MEDIUM, SLOW rotation: 0, // 旋转角度 alias: 'myImage', // 图片别名 format: 'PNG' // 格式：JPEG, PNG }); // 获取图片属性 const imgProps = doc.getImageProperties(imgData); console.log(`图片尺寸: ${imgProps.width}x${imgProps.height}`); // 图片缩放模式 const scaleToFit = (imgWidth, imgHeight, maxWidth, maxHeight) => { const widthRatio = maxWidth / imgWidth; const heightRatio = maxHeight / imgHeight; const ratio = Math.min(widthRatio, heightRatio); return { width: imgWidth * ratio, height: imgHeight * ratio }; };

2.1.5 图形绘制

// 线条 doc.setLineWidth(0.5); // 线宽 doc.setDrawColor(0, 0, 255); // 线条颜色 doc.line(20, 20, 100, 20); // 直线 // 矩形 doc.setFillColor(255, 0, 0); // 填充色 doc.rect(20, 30, 50, 30, 'F'); // 填充矩形 doc.rect(80, 30, 50, 30, 'S'); // 描边矩形 doc.rect(140, 30, 50, 30, 'FD'); // 填充+描边 // 圆形/椭圆 doc.circle(60, 80, 20, 'FD'); // 圆形 doc.ellipse(120, 80, 30, 20, 'FD'); // 椭圆 // 多边形 const triangle = [[100, 120], [120, 100], [140, 120]]; doc.setFillColor(0, 255, 0); doc.poly(triangle, 'F'); // 路径 doc.setDrawColor(128, 0, 128); doc.setLineWidth(2); doc.path('M 160 100 L 180 120 L 160 140 Z'); // SVG路径语法 // 虚线 doc.setLineDashPattern([5, 5], 0); // 5像素实线，5像素间隔 doc.line(20, 150, 200, 150); doc.setLineDashPattern([], 0); // 恢复实线

2.1.6 表格生成

// 使用autoTable插件 import jsPDF from 'jspdf'; import 'jspdf-autotable'; const doc = new jsPDF(); // 简单表格 doc.autoTable({ head: [['ID', '姓名', '年龄', '城市']], body: [ ['1', '张三', '28', '北京'], ['2', '李四', '32', '上海'], ['3', '王五', '25', '广州'] ], startY: 20, theme: 'grid', // 主题：striped, grid, plain styles: { fontSize: 10, cellPadding: 3, overflow: 'linebreak' }, headStyles: { fillColor: [22, 160, 133], textColor: 255, fontStyle: 'bold' }, columnStyles: { 0: { cellWidth: 20 }, // 第一列宽度 1: { cellWidth: 40 } }, margin: { top: 20 }, didDrawPage: function(data) { // 每页绘制的回调 doc.setFontSize(10); doc.text(`第 ${data.pageNumber} 页`, data.settings.margin.left, doc.internal.pageSize.height - 10); } }); // 多页表格 const largeData = []; for (let i = 0; i < 100; i++) { largeData.push([i + 1, `用户${i}`, Math.floor(Math.random() * 50 + 18), '城市']); } doc.autoTable({ head: [['ID', '姓名', '年龄', '城市']], body: largeData, startY: 20, pageBreak: 'auto', // 自动分页 rowPageBreak: 'avoid', // 避免行内分页 showHead: 'everyPage' // 每页都显示表头 });

2.2 高级功能

2.2.1 页码和页眉页脚

function addHeaderFooter(doc, totalPages) { const pageWidth = doc.internal.pageSize.getWidth(); const pageHeight = doc.internal.pageSize.getHeight(); // 页眉 doc.setFontSize(10); doc.setTextColor(100, 100, 100); doc.text('公司名称', 20, 15); doc.text(new Date().toLocaleDateString(), pageWidth - 20, 15, { align: 'right' }); // 页脚 doc.setFontSize(9); doc.text(`第 ${doc.internal.getCurrentPageInfo().pageNumber} 页 / 共 ${totalPages} 页`, pageWidth / 2, pageHeight - 10, { align: 'center' }); // 页脚线 doc.setDrawColor(200, 200, 200); doc.line(20, pageHeight - 15, pageWidth - 20, pageHeight - 15); } // 在每页绘制时调用 const totalPages = 5; for (let i = 1; i <= totalPages; i++) { if (i > 1) doc.addPage(); addHeaderFooter(doc, totalPages); // 添加内容... }

2.2.2 水印功能

function addWatermark(doc, text) { const pageWidth = doc.internal.pageSize.getWidth(); const pageHeight = doc.internal.pageSize.getHeight(); // 保存当前状态 doc.saveGraphicsState(); // 设置水印样式 doc.setFontSize(40); doc.setTextColor(200, 200, 200, 0.3); // 半透明灰色 doc.setFont('helvetica', 'bold'); // 计算文本宽度 const textWidth = doc.getStringUnitWidth(text) * doc.internal.getFontSize() / doc.internal.scaleFactor; // 旋转和重复水印 const angle = -45 * Math.PI / 180; const spacing = 150; doc.saveGraphicsState(); for (let x = -pageWidth; x < pageWidth * 2; x += spacing) { for (let y = -pageHeight; y < pageHeight * 2; y += spacing) { doc.saveGraphicsState(); doc.translate(x, y); doc.rotate(angle, { origin: [0, 0] }); doc.text(text, 0, 0); doc.restoreGraphicsState(); } } doc.restoreGraphicsState(); } // 使用水印 const doc = new jsPDF(); doc.text('文档内容', 20, 20); addWatermark(doc, '机密文件');

2.2.3 链接和书签

// 内部链接 doc.textWithLink('点击跳转到第2页', 20, 20, { pageNumber: 2 }); // 外部链接 doc.textWithLink('访问官网', 20, 40, { url: 'https://example.com' }); // 邮件链接 doc.textWithLink('发送邮件', 20, 60, { url: 'mailto:[email protected]' }); // 添加书签 doc.outline.add(null, "封面", 1); doc.outline.add(null, "第一章", 2); doc.outline.add(1, "1.1 简介", 3); // 子书签 // 可点击目录 const tocY = 30; const chapters = [ { title: "第一章 简介", page: 1 }, { title: "第二章 基础", page: 3 }, { title: "第三章 高级", page: 5 } ]; chapters.forEach((chapter, i) => { doc.text(chapter.title, 20, tocY + i * 10); doc.textWithLink(`第${chapter.page}页`, 150, tocY + i * 10, { pageNumber: chapter.page }); });

第三部分：HTML2Canvas深度解析

3.1 核心原理与架构

HTML2Canvas的工作原理相当复杂，它本质上是一个简化的浏览器渲染引擎。让我们深入了解它的工作流程：

3.1.2 核心组件

// HTML2Canvas内部结构示意 class HTML2CanvasRenderer { constructor(element, options) { this.element = element; this.options = options; this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); } async render() { // 1. 解析DOM树 const root = this.parseDOM(this.element); // 2. 计算样式 this.calculateStyles(root); // 3. 创建渲染树 const renderTree = this.createRenderTree(root); // 4. 布局计算 this.calculateLayout(renderTree); // 5. 绘制 await this.draw(renderTree); return this.canvas; } // ... 其他方法 }

3.2 配置参数详解

const options = { // 基本配置 allowTaint: false, // 是否允许污染canvas useCORS: true, // 是否使用CORS加载图片 backgroundColor: '#ffffff', // 背景色 scale: 2, // 缩放比例（设备像素比） width: null, // 自定义宽度 height: null, // 自定义高度 // 日志和调试 logging: true, // 启用日志 onclone: null, // DOM克隆后的回调 // 图像配置 imageTimeout: 15000, // 图片加载超时(ms) proxy: null, // 代理服务器URL removeContainer: true, // 是否移除临时容器 // 高级配置 foreignObjectRendering: false, // 使用foreignObject（SVG） ignoreElements: (element) => false, // 忽略特定元素 onrendered: null, // 渲染完成回调 // 性能配置 async: true, // 异步渲染 cacheBust: false, // 缓存破坏 letterRendering: false, // 文字渲染优化 // Canvas配置 canvas: null, // 使用现有canvas x: 0, // 水平偏移 y: 0, // 垂直偏移 scrollX: 0, // 水平滚动 scrollY: 0, // 垂直滚动 windowWidth: window.innerWidth, // 窗口宽度 windowHeight: window.innerHeight // 窗口高度 };

第四部分：JSPDF与HTML2Canvas集成实战

4.1 基础集成方案

// 基础集成函数 async function exportToPDF(elementId, fileName = 'document.pdf', options = {}) { // 默认配置 const defaultOptions = { pdf: { orientation: 'p', unit: 'mm', format: 'a4', compress: true }, html2canvas: { scale: 2, useCORS: true, logging: false }, margin: { top: 15, right: 15, bottom: 15, left: 15 } }; // 合并配置 const config = { pdf: { ...defaultOptions.pdf, ...options.pdf }, html2canvas: { ...defaultOptions.html2canvas, ...options.html2canvas }, margin: { ...defaultOptions.margin, ...options.margin } }; try { // 1. 获取目标元素 const element = document.getElementById(elementId); if (!element) { throw new Error(`元素 #${elementId} 未找到`); } // 2. 使用html2canvas生成canvas console.log('开始生成canvas...'); const canvas = await html2canvas(element, config.html2canvas); // 3. 获取图片数据 const imgData = canvas.toDataURL('image/png', 1.0); const imgProps = { width: canvas.width, height: canvas.height }; // 4. 计算PDF尺寸 const pdfWidth = config.pdf.format === 'a4' ? 210 : 297; // A4宽度210mm const pdfHeight = config.pdf.format === 'a4' ? 297 : 210; // A4高度297mm // 可用宽度 = PDF宽度 - 左右边距 const usableWidth = pdfWidth - config.margin.left - config.margin.right; // 5. 计算缩放比例 const pixelsPerMM = imgProps.width / usableWidth; const scale = usableWidth / imgProps.width; const imgHeightMM = imgProps.height * scale; // 6. 创建PDF console.log('创建PDF文档...'); const doc = new jsPDF(config.pdf); // 7. 处理分页 const pageHeight = pdfHeight - config.margin.top - config.margin.bottom; let position = 0; if (imgHeightMM <= pageHeight) { // 一页能放下 doc.addImage(imgData, 'PNG', config.margin.left, config.margin.top, usableWidth, imgHeightMM); } else { // 需要分页 while (position < imgHeightMM) { if (position > 0) { doc.addPage(); } doc.addImage(imgData, 'PNG', config.margin.left, config.margin.top - position, usableWidth, imgHeightMM); position += pageHeight; } } // 8. 保存PDF doc.save(fileName); console.log('PDF导出完成'); return doc; } catch (error) { console.error('导出PDF失败:', error); throw error; } } // 使用示例 document.getElementById('export-btn').addEventListener('click', async () => { try { await exportToPDF('content', '报告.pdf', { pdf: { format: 'a4', orientation: 'portrait' }, html2canvas: { scale: 3, // 更高清 backgroundColor: '#ffffff' }, margin: { top: 20, right: 20, bottom: 20, left: 20 } }); } catch (error) { alert('导出失败: ' + error.message); } });

4.2 高级集成：智能分页与表格保护

class SmartPDFExporter { constructor(options = {}) { this.options = this.mergeOptions(options); this.pageBreaks = []; } mergeOptions(options) { const defaults = { elementId: null, fileName: 'export.pdf', pdf: { orientation: 'p', unit: 'mm', format: 'a4' }, html2canvas: { scale: 2, logging: false, useCORS: true }, styling: { tableProtection: true, keepTogetherClass: 'keep-together', avoidBreakClass: 'avoid-break' }, margins: { top: 15, right: 15, bottom: 15, left: 15 }, features: { pageNumbers: true, header: true, footer: true, watermark: false } }; return this.deepMerge(defaults, options); } deepMerge(target, source) { for (const key in source) { if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) { if (!target[key]) target[key] = {}; this.deepMerge(target[key], source[key]); } else { target[key] = source[key]; } } return target; } async export() { try { // 1. 验证和准备 this.validateInput(); // 2. 应用保护样式 if (this.options.styling.tableProtection) { this.applyProtectionStyles(); } // 3. 分析DOM结构 const analysis = await this.analyzeDOM(); // 4. 计算分页点 this.calculatePageBreaks(analysis); // 5. 生成canvas const canvas = await this.generateCanvas(); // 6. 创建PDF const pdf = await this.generatePDF(canvas, analysis); // 7. 保存 pdf.save(this.options.fileName); return { success: true, pdf }; } catch (error) { console.error('导出失败:', error); throw error; } } validateInput() { if (!this.options.elementId) { throw new Error('elementId 必须提供'); } const element = document.getElementById(this.options.elementId); if (!element) { throw new Error(`元素 #${this.options.elementId} 未找到`); } this.element = element; } applyProtectionStyles() { const style = document.createElement('style'); style.textContent = ` .${this.options.styling.keepTogetherClass} { page-break-inside: avoid !important; break-inside: avoid !important; } .${this.options.styling.avoidBreakClass} { page-break-before: avoid !important; break-before: avoid !important; } table { page-break-inside: avoid !important; break-inside: avoid !important; border-collapse: collapse !important; } tr { page-break-inside: avoid !important; break-inside: avoid !important; } `; // 移除可能存在的旧样式 const oldStyles = this.element.querySelectorAll('style[data-pdf-protection]'); oldStyles.forEach(s => s.remove()); style.setAttribute('data-pdf-protection', 'true'); this.element.appendChild(style); // 为表格添加保护类 const tables = this.element.querySelectorAll('table'); tables.forEach(table => { table.classList.add(this.options.styling.keepTogetherClass); }); // 为重要元素添加避免分页类 const importantElements = this.element.querySelectorAll('h1, h2, .important'); importantElements.forEach(el => { el.classList.add(this.options.styling.avoidBreakClass); }); } async analyzeDOM() { const tables = this.element.querySelectorAll('table'); const importantElements = this.element.querySelectorAll(`.${this.options.styling.keepTogetherClass}`); const elementRect = this.element.getBoundingClientRect(); const analysis = { tables: [], importantElements: [], containerHeight: this.element.offsetHeight, containerWidth: this.element.offsetWidth }; // 分析表格 tables.forEach((table, index) => { const rect = table.getBoundingClientRect(); analysis.tables.push({ index, element: table, top: rect.top - elementRect.top, bottom: rect.bottom - elementRect.top, height: rect.height, rowCount: table.querySelectorAll('tr').length, canBreak: !table.classList.contains(this.options.styling.keepTogetherClass) }); }); // 分析重要元素 importantElements.forEach((el, index) => { if (el.tagName !== 'TABLE') { // 表格已经分析过了 const rect = el.getBoundingClientRect(); analysis.importantElements.push({ index, element: el, top: rect.top - elementRect.top, bottom: rect.bottom - elementRect.top, height: rect.height, tagName: el.tagName }); } }); // 按位置排序 analysis.tables.sort((a, b) => a.top - b.top); analysis.importantElements.sort((a, b) => a.top - b.top); return analysis; } calculatePageBreaks(analysis) { const pdf = new jsPDF(this.options.pdf); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const usableWidth = pdfWidth - this.options.margins.left - this.options.margins.right; const usableHeight = pdfHeight - this.options.margins.top - this.options.margins.bottom; // 像素到毫米的转换比例 const pxToMM = usableWidth / analysis.containerWidth; const breaks = []; let currentPageHeightMM = 0; // 处理所有需要保护的元素 const allElements = [...analysis.tables, ...analysis.importantElements] .sort((a, b) => a.top - b.top); allElements.forEach((element, index) => { const elementHeightMM = element.height * pxToMM; // 检查是否放得下 if (currentPageHeightMM + elementHeightMM > usableHeight && currentPageHeightMM > 0) { // 放不下，需要分页 if (index > 0) { const prevElement = allElements[index - 1]; // 在元素前分页 breaks.push({ type: 'before', element: element, position: element.top, reason: `${element.tagName || 'table'} 无法放入当前页` }); currentPageHeightMM = elementHeightMM; } } else { // 放得下 currentPageHeightMM += elementHeightMM; } }); this.pageBreaks = breaks; console.log('计算出的分页点:', this.pageBreaks); } async generateCanvas() { // 固定尺寸，防止渲染时变化 const originalStyle = { width: this.element.style.width, height: this.element.style.height, position: this.element.style.position }; this.element.style.width = `${this.element.offsetWidth}px`; this.element.style.height = `${this.element.offsetHeight}px`; this.element.style.position = 'relative'; try { const canvas = await html2canvas(this.element, this.options.html2canvas); return canvas; } finally { // 恢复原始样式 Object.assign(this.element.style, originalStyle); } } async generatePDF(canvas, analysis) { const pdf = new jsPDF(this.options.pdf); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const usableWidth = pdfWidth - this.options.margins.left - this.options.margins.right; const usableHeight = pdfHeight - this.options.margins.top - this.options.margins.bottom; // 计算缩放 const scale = usableWidth / canvas.width; const totalHeightMM = canvas.height * scale; // 如果有分页点，使用智能分页 if (this.pageBreaks.length > 0) { await this.generatePDFWithBreaks(pdf, canvas, scale, usableWidth, usableHeight); } else { // 无分页点，使用简单分页 await this.generatePDFSimple(pdf, canvas, scale, usableWidth, usableHeight); } // 添加页眉页脚 if (this.options.features.header || this.options.features.footer) { this.addHeaderFooter(pdf, this.pageBreaks.length + 1); } // 添加水印 if (this.options.features.watermark) { this.addWatermark(pdf); } return pdf; } async generatePDFWithBreaks(pdf, canvas, scale, usableWidth, usableHeight) { const imgData = canvas.toDataURL('image/png', 1.0); // 转换分页点为canvas像素位置 const breakPoints = this.pageBreaks.map(breakInfo => breakInfo.position); breakPoints.sort((a, b) => a - b); // 确保从0开始，到canvas高度结束 const allPoints = [0, ...breakPoints, canvas.height]; let startY = 0; for (let i = 1; i < allPoints.length; i++) { const segmentHeight = allPoints[i] - startY; if (segmentHeight <= 0) continue; // 创建当前页的canvas片段 const segmentCanvas = document.createElement('canvas'); segmentCanvas.width = canvas.width; segmentCanvas.height = segmentHeight; const ctx = segmentCanvas.getContext('2d'); ctx.drawImage( canvas, 0, startY, canvas.width, segmentHeight, 0, 0, canvas.width, segmentHeight ); const segmentImgData = segmentCanvas.toDataURL('image/png', 1.0); const segmentHeightMM = segmentHeight * scale; // 如果不是第一页，添加新页 if (i > 1) { pdf.addPage(); } // 添加图片到PDF pdf.addImage( segmentImgData, 'PNG', this.options.margins.left, this.options.margins.top, usableWidth, segmentHeightMM ); startY = allPoints[i]; } } generatePDFSimple(pdf, canvas, scale, usableWidth, usableHeight) { const imgData = canvas.toDataURL('image/png', 1.0); const totalHeightMM = canvas.height * scale; if (totalHeightMM <= usableHeight) { // 一页能放下 pdf.addImage( imgData, 'PNG', this.options.margins.left, this.options.margins.top, usableWidth, totalHeightMM ); } else { // 需要分页 let position = 0; while (position < totalHeightMM) { if (position > 0) { pdf.addPage(); } pdf.addImage( imgData, 'PNG', this.options.margins.left, this.options.margins.top - position, usableWidth, totalHeightMM ); position += usableHeight; } } } addHeaderFooter(pdf, totalPages) { const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const currentPage = pdf.internal.getCurrentPageInfo().pageNumber; // 保存当前状态 const originalFont = pdf.internal.getFont(); const originalSize = pdf.internal.getFontSize(); const originalColor = pdf.internal.getTextColor(); // 页眉 if (this.options.features.header) { pdf.setFontSize(10); pdf.setTextColor(100, 100, 100); // 左侧：标题 pdf.text( this.options.fileName.replace('.pdf', ''), this.options.margins.left, this.options.margins.top - 10 ); // 右侧：日期 const dateStr = new Date().toLocaleDateString(); pdf.text( dateStr, pdfWidth - this.options.margins.right, this.options.margins.top - 10, { align: 'right' } ); // 页眉线 pdf.setDrawColor(200, 200, 200); pdf.line( this.options.margins.left, this.options.margins.top - 5, pdfWidth - this.options.margins.right, this.options.margins.top - 5 ); } // 页脚 if (this.options.features.footer) { // 页脚线 pdf.setDrawColor(200, 200, 200); pdf.line( this.options.margins.left, pdfHeight - this.options.margins.bottom + 5, pdfWidth - this.options.margins.right, pdfHeight - this.options.margins.bottom + 5 ); // 页码 if (this.options.features.pageNumbers) { pdf.setFontSize(9); pdf.setTextColor(100, 100, 100); const pageText = `第 ${currentPage} 页 / 共 ${totalPages} 页`; pdf.text( pageText, pdfWidth / 2, pdfHeight - this.options.margins.bottom + 10, { align: 'center' } ); } } // 恢复原始状态 pdf.setFont(originalFont[0], originalFont[1]); pdf.setFontSize(originalSize); pdf.setTextColor(originalColor[0], originalColor[1], originalColor[2]); } addWatermark(pdf) { const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); // 保存状态 pdf.saveGraphicsState(); // 设置水印样式 pdf.setFontSize(40); pdf.setTextColor(200, 200, 200, 0.1); pdf.setFont('helvetica', 'bold'); // 旋转和重复 const angle = -45 * Math.PI / 180; const text = this.options.features.watermark.text || 'CONFIDENTIAL'; for (let x = -pdfWidth; x < pdfWidth * 2; x += 150) { for (let y = -pdfHeight; y < pdfHeight * 2; y += 150) { pdf.saveGraphicsState(); pdf.translate(x, y); pdf.rotate(angle, { origin: [0, 0] }); pdf.text(text, 0, 0); pdf.restoreGraphicsState(); } } pdf.restoreGraphicsState(); } } // 使用示例 const exporter = new SmartPDFExporter({ elementId: 'report-content', fileName: '智能报告.pdf', pdf: { format: 'a4', orientation: 'portrait' }, html2canvas: { scale: 2, useCORS: true, backgroundColor: '#ffffff' }, features: { pageNumbers: true, header: true, footer: true, watermark: { text: '公司机密', enabled: true } }, styling: { tableProtection: true, keepTogetherClass: 'pdf-keep-together' } }); // 触发导出 document.getElementById('smart-export').addEventListener('click', async () => { try { await exporter.export(); alert('导出成功！'); } catch (error) { alert('导出失败: ' + error.message); } });

4.3 响应式与移动端适配

class ResponsivePDFExporter { constructor(options = {}) { this.options = { breakpoints: { mobile: 768, tablet: 1024, desktop: 1200 }, scaling: { mobile: 1, tablet: 1.5, desktop: 2 }, ...options }; } detectDeviceType() { const width = window.innerWidth; if (width < this.options.breakpoints.mobile) { return 'mobile'; } else if (width < this.options.breakpoints.tablet) { return 'tablet'; } else { return 'desktop'; } } async exportResponsive(elementId, fileName) { const deviceType = this.detectDeviceType(); const scale = this.options.scaling[deviceType] || 1.5; console.log(`设备类型: ${deviceType}, 使用缩放: ${scale}`); // 调整元素样式以适应PDF const element = document.getElementById(elementId); const originalStyles = this.backupStyles(element); try { // 应用响应式样式 this.applyResponsiveStyles(element, deviceType); // 生成PDF const canvas = await html2canvas(element, { scale, useCORS: true, backgroundColor: '#ffffff' }); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = canvas.width; const imgHeight = canvas.height; // 计算缩放比例 const margin = 10; const usableWidth = pdfWidth - 2 * margin; const scaleFactor = usableWidth / imgWidth; pdf.addImage( canvas.toDataURL('image/png', 1.0), 'PNG', margin, margin, usableWidth, imgHeight * scaleFactor ); pdf.save(fileName); } finally { // 恢复原始样式 this.restoreStyles(element, originalStyles); } } backupStyles(element) { return { width: element.style.width, height: element.style.height, fontSize: element.style.fontSize, padding: element.style.padding, margin: element.style.margin, display: element.style.display }; } applyResponsiveStyles(element, deviceType) { // 根据设备类型应用不同的样式 const styles = { mobile: { width: '100%', fontSize: '12px', padding: '10px', margin: '0', display: 'block' }, tablet: { width: '90%', fontSize: '13px', padding: '15px', margin: '0 auto', display: 'block' }, desktop: { width: '80%', fontSize: '14px', padding: '20px', margin: '0 auto', display: 'block' } }; const deviceStyles = styles[deviceType] || styles.desktop; Object.assign(element.style, deviceStyles); // 特别处理表格 const tables = element.querySelectorAll('table'); tables.forEach(table => { if (deviceType === 'mobile') { table.style.fontSize = '10px'; table.style.width = '100%'; } }); } restoreStyles(element, originalStyles) { Object.assign(element.style, originalStyles); } } // 使用响应式导出 const responsiveExporter = new ResponsivePDFExporter(); // 响应式导出按钮 document.getElementById('responsive-export').addEventListener('click', () => { responsiveExporter.exportResponsive('content', '响应式报告.pdf'); });