使用JS将当前页面保存成PDF，支持图片和文字
最新回答
雾涣风月
2023-02-05 11:36:21
使用JavaScript将当前页面保存为PDF的完整方案
一、核心实现原理DOM转Canvas通过html2canvas.js库遍历DOM结构，将每个节点及其样式渲染为Canvas图像，解决长页面截取问题。
Canvas转PDF使用jsPDF库将生成的Canvas转换为PDF文件，支持自动分页功能。
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
2. HTML结构<div id="content-to-pdf"> <!-- 这里放置需要保存为PDF的内容 --> <h1>网页标题</h1> <p>这里是长文本内容...</p> <img src="example.jpg" alt="示例图片"></div><button id="save-pdf">保存为PDF</button>3. JavaScript逻辑document.getElementById('save-pdf').addEventListener('click', async () => { // 1. 获取目标DOM元素 const element = document.getElementById('content-to-pdf'); // 2. 转换为Canvas const canvas = await html2canvas(element, { scale: 2, // 提高清晰度 logging: false, useCORS: true // 允许跨域图片 }); // 3. 计算PDF尺寸（A4比例） const imgWidth = 210; // A4宽度(mm) const imgHeight = (canvas.height * imgWidth) / canvas.width; // 4. 创建PDF const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); // 5. 添加图像到PDF（自动分页） const imgData = canvas.toDataURL('image/png'); pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); // 6. 保存PDF pdf.save('网页内容.pdf');});三、关键配置说明html2canvas参数
scale: 数值越大清晰度越高（建议2-3）
useCORS: 解决跨域图片问题
allowTaint: 允许加载污染的Canvas
jsPDF分页处理对于超长内容，需手动计算分页位置：
const pageHeight = 295; // A4高度(mm)let position = 0;while (position < imgHeight) { pdf.addImage(imgData, 'PNG', 0, -position, imgWidth, imgHeight); position += pageHeight; if (position < imgHeight) pdf.addPage();}
样式优化添加打印专用CSS：
@media print { body * { visibility: hidden; } #content-to-pdf, #content-to-pdf * { visibility: visible; }}性能优化
对大页面分块渲染
使用Web Worker避免页面卡顿
错误处理
try { await html2canvas(element);} catch (error) { console.error("转换失败:", error);}
GitHub示例项目
在线Demo
七、注意事项- 跨域图片需服务器配置CORS
- 某些CSS属性（如box-shadow）可能无法完美渲染
- 动态内容需确保加载完成后再触发转换
通过以上方案，可实现包含文字和图片的完整网页转PDF功能，支持自动分页和高清输出。
热门标签
