悠悠楠杉
网站页面
js如何生成PDF文档
08/27
在实际开发中，我们经常需要将网页内容或动态数据转换为可打印的PDF文档。以下是几种主流的JavaScript PDF生成方案：
1. 客户端方案：jsPDF
javascript
// 基本使用示例
import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.setFont("helvetica");
doc.setFontSize(12);
// 添加标题
doc.setFontSize(20);
doc.text("项目可行性报告", 105, 20, { align: "center" });
// 添加内容段落
const loremIpsum = "根据市场调研数据...（此处为连贯的段落内容）";
doc.setFontSize(12);
doc.text(loremIpsum, 15, 40, { maxWidth: 180 });
// 添加页脚
doc.setFontSize(10);
doc.text("生成时间：" + new Date().toLocaleDateString(), 10, 290);
// 保存文件
doc.save("report.pdf");
优点：
- 纯前端实现，无需服务器
- 支持自定义字体和图形
- 轻量级（仅60KB）
缺点：
- 复杂排版困难
- 中文支持需要额外配置
2. 服务端方案：PDFKit
javascript
const PDFDocument = require('pdfkit');
const fs = require('fs');
const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
// 设置文档元信息
doc.info.Title = '技术白皮书';
doc.info.Author = '张工程师';
// 添加封面
doc.fontSize(25)
.text('人工智能应用指南', 50, 80);
// 正文内容
doc.moveDown()
.fontSize(11)
.text(近年来，机器学习技术在各行业...（此处为自然连贯的论述内容）, {
align: 'justify',
indent: 30
});
// 添加图表
doc.addPage()
.image('chart.png', 50, 50, { width: 500 });
doc.end();
专业技巧：
1. 使用lineGap参数控制行间距
2. 复杂表格建议先用HTML生成再转换
3. 对于长文档要实现分页逻辑
3. 混合方案：Puppeteer
javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 加载HTML内容
await page.setContent(<!DOCTYPE html>
<html>
<body>
<h1>季度财务报告</h1>
<p>本季度公司营收达到...（自然流畅的财务分析）</p>
</body>
</html>);
// 生成PDF
await page.pdf({
path: 'financial-report.pdf',
format: 'A4',
margin: { top: '2cm', right: '2cm', bottom: '2cm', left: '2cm' }
});
await browser.close();
})();
适用场景：
- 需要保留CSS样式
- 已有现成HTML模板
- 要求精确的打印效果
最佳实践建议
内容组织：
- 使用章节标题建立清晰的文档结构
- 保持段落长度在3-5句话之间
- 重要数据使用加粗或高亮显示
性能优化：
- 大文档采用流式生成
- 图片进行适当压缩
- 避免在循环中频繁操作DOM
可访问性：
- 添加文档标签和书签
- 确保足够的颜色对比度
- 为图片添加alt文本
实际项目中，建议根据具体需求选择技术方案。对于简单的客户端生成需求，jsPDF是不错的选择；需要精细控制排版时，PDFKit更合适；而需要完全复现网页样式时，Puppeteer方案最可靠。
