ℹ️ 需求描述
上一版本发布后,有用户提出想要将图片转换(或者说生成更为贴切)PDF文档,于是有了今天要分享的内容。
功能概述:将用户选择的文件,预处理(如裁剪、旋转)后,绘制到新的 PDF 文件内。
📄 关于PDF
PDF
(Portable Document Format,便携式文档格式)是当今最广泛使用的电子文档格式之一,几乎成为数字文档交换的代名词。它的发展历程涉及技术创新、商业竞争和标准化演进。
📜发展简史
- 1991年,Adobe 联合创始人 John Warnock 提出 "Camelot" 计划,目标是创建一种 跨平台、固定布局的电子文档格式,确保在任何设备上都能正确显示。
- 1993年,Adobe 正式发布 PDF 1.0,配套推出 Acrobat 1.0(用于创建和阅读 PDF 的工具)。
- 2008年,Adobe 将 PDF 提交给 ISO(国际标准化组织),使其成为开放标准(ISO 32000-1)。
🚀技术演进
版本 | 发布时间 | 重要改进 |
---|---|---|
PDF 1.0 | 1993 | 基础文本、图像支持 |
PDF 1.5 | 2003 | 支持 JPEG2000、图层、增强压缩 |
PDF/A (2005) | 长期存档标准 | 适合法律、档案存储 |
PDF/X (2001) | 印刷出版标准 | 确保颜色、字体精确输出 |
PDF 2.0 (2017) | 最新 ISO 标准 | 强化安全、标签化结构 |
🌍PDF 的现状(2020s+)
1. 无处不在的应用
- Web 浏览器:Chrome、Firefox 内置 PDF 阅读器。
- 移动端:iOS/Android 原生支持 PDF 预览。
- 云服务:Google Drive、Dropbox 直接解析 PDF。
- 开发者工具 :如
pdf-lib
、PDF.js
、Apache PDFBox
。
2. 现代 PDF 生态
- 可编辑 PDF(Adobe Acrobat、Foxit)。
- PDF 表单(交互式字段,支持电子签名)。
- OCR 技术(将扫描件转为可搜索文本)。
- 3D PDF(嵌入三维模型,用于工程图纸)。
3. 竞争对手
- Office Open XML(DOCX, PPTX):微软的开放文档格式。
- EPUB:更适合电子书。
- Web 技术:HTML + CSS 逐渐替代简单 PDF(如在线报告)。
🧑💻 技术实现
pdf-lib 库
pdf-lib 是一个强大的 JavaScript/TypeScript 库,用于 创建、修改和操作 PDF 文档。它完全在 Node.js 和浏览器环境中运行,不依赖任何外部服务或原生依赖(如 PDFtk 或 Ghostscript)。
主要功能
- ✅ 创建新的 PDF 文档
- ✅ 修改现有的 PDF(如添加文本、图片、水印)
- ✅ 合并多个 PDF 文件
- ✅ 提取 PDF 页面
- ✅ 添加表单字段(如文本框、复选框)
- ✅ 支持嵌入字体(包括自定义字体)
- ✅ 支持加密和权限控制
基本用法
创建一个简单的 PDF 文档
js
import { PDFDocument, rgb } from 'pdf-lib';
async function createPdf() {
// 创建一个新的 PDF 文档
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([550, 750]); // [width, height]
// 添加文本
page.drawText('Hello, PDF-Lib!', {
x: 50,
y: 700,
size: 30,
color: rgb(0, 0, 0), // 黑色
});
// 保存 PDF
const pdfBytes = await pdfDoc.save();
return pdfBytes; // 可写入文件或发送给客户端
}
createPdf().then(pdfBytes => {
// Node.js 写入文件
const fs = require('fs');
fs.writeFileSync('output.pdf', pdfBytes);
});
优缺点
✅ 优点
- 纯 JavaScript,跨平台(Node.js 和浏览器均可运行)
- API 直观,文档完善
- 支持现代 PDF 功能(如嵌入字体、表单)
- 不需要外部依赖(如 PDFtk、Ghostscript)
❌ 缺点
- 处理超大 PDF 时可能较慢
- 不支持 PDF 渲染(仅修改结构,不能像 PDF.js 那样显示 PDF)
- 某些高级 PDF 功能(如 OCR)不支持
核心代码
安装依赖:
shell
pnpm i pdf-lib
js
const sharp = require('sharp')
const { statSync, writeFileSync } = require('node:fs')
const { PDFDocument } = require('pdf-lib')
/**
* 图片转换为PDF
* @param {sharp.Sharp} img
* @param {String} target
*/
const toPdf = async (img, target)=>{
const pdf = await PDFDocument.create()
const page = pdf.addPage()
const pdfImg = await pdf.embedJpg(await img.toBuffer())
const { width, height } = pdfImg.scale(1)
page.setSize(width, height)
page.drawImage(pdfImg, { x:0, y:0, width, height })
const pdfBytes = await pdf.save()
writeFileSync(target, pdfBytes)
}
效果预览

未来展望
能够合并所选图片到一个 PDF 文档。