用pdf-lib创建可填写PDF：交互式表单设计指南
项目地址: https://gitcode.com/gh_mirrors/pd/pdf-lib 你还在为手动创建PDF表单而烦恼吗？用pdf-lib只需几行代码就能生成专业的可填写PDF，让数据收集效率提升10倍！本文将带你从零开始，掌握文本框、复选框、下拉菜单等表单元素的设计技巧，最终打造出用户友好的交互式PDF表单。
什么是交互式PDF表单？
交互式PDF表单（Interactive PDF Form）是一种包含可填写字段的PDF文档，用户可以直接在PDF阅读器中输入文本、选择选项或点击按钮。相比传统纸质表单，它具有数据易于收集、处理和分析的优势，广泛应用于调查问卷、申请表格、订单确认等场景。
准备工作
安装pdf-lib
你可以通过npm或yarn安装pdf-lib，也可以直接通过CDN引入到网页中：
npm install pdf-lib
# 或
yarn add pdf-lib
引入库文件
在HTML中使用国内CDN引入pdf-lib和字体工具：
<script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pdf-lib/fontkit/dist/fontkit.umd.js"></script>
基本步骤：创建你的第一个表单
1. 初始化PDF文档
首先创建一个新的PDF文档，并注册字体工具：
const { PDFDocument, rgb, degrees } = PDFLib;
async function createForm() {
// 创建新文档
const pdfDoc = await PDFDocument.create();
// 注册字体工具
pdfDoc.registerFontkit(fontkit);
// 嵌入字体
const ubuntuFont = await pdfDoc.embedFont(await fetchFont('Ubuntu-R.ttf'));
// 添加页面
const page = pdfDoc.addPage([550, 750]);
// 获取表单对象
const form = pdfDoc.getForm();
// ...后续代码
}
2. 添加文本框
使用createTextField方法创建文本输入框，适用于姓名、邮箱等信息填写：
// 创建单行文本框
const nameField = form.createTextField('fullName');
nameField.setText('请输入您的姓名');
nameField.addToPage(page, {
x: 55,
y: 640,
width: 200,
height: 30,
borderWidth: 1,
borderColor: rgb(0.7, 0.7, 0.7),
backgroundColor: rgb(1, 1, 1),
textColor: rgb(0, 0, 0),
font: ubuntuFont,
fontSize: 12
});
// 创建多行文本框
const addressField = form.createTextField('address');
addressField.enableMultiline();
addressField.setText('请输入您的详细地址');
addressField.addToPage(page, {
x: 55,
y: 580,
width: 400,
height: 60,
borderWidth: 1,
backgroundColor: rgb(1, 1, 1)
});
图1：pdf-lib创建的文本框效果展示
3. 添加复选框
使用createCheckBox方法创建复选框，适用于多项选择场景：
// 创建复选框组
const hobbiesField = [
{ name: 'reading', label: '阅读', y: 500 },
{ name: 'sports', label: '运动', y: 470 },
{ name: 'music', label: '音乐', y: 440 }
];
hobbiesField.forEach(item => {
const checkBox = form.createCheckBox(`hobby.${item.name}`);
checkBox.addToPage(page, {
x: 55,
y: item.y,
width: 18,
height: 18,
borderWidth: 1
});
// 添加标签文本
page.drawText(item.label, {
x: 80,
y: item.y + 3,
font: ubuntuFont,
size: 12
});
});
4. 添加单选按钮组
使用createRadioGroup方法创建单选按钮组，适用于单项选择场景：
// 创建单选按钮组
const genderField = form.createRadioGroup('gender');
const options = [
{ value: 'male', label: '男', y: 380 },
{ value: 'female', label: '女', y: 350 },
{ value: 'other', label: '其他', y: 320 }
];
options.forEach(option => {
genderField.addOptionToPage(option.value, page, {
x: 55,
y: option.y,
width: 18,
height: 18
});
page.drawText(option.label, {
x: 80,
y: option.y + 3,
font: ubuntuFont,
size: 12
});
});
// 默认选中第一个选项
genderField.select('male');
5. 添加下拉菜单
使用createDropdown方法创建下拉菜单，节省页面空间同时提供多个选项：
// 创建下拉菜单
const educationField = form.createDropdown('education');
educationField.addOptions([
'高中及以下',
'大专',
'本科',
'硕士',
'博士及以上'
]);
educationField.select('本科');
educationField.addToPage(page, {
x: 55,
y: 280,
width: 200,
height: 30,
borderWidth: 1
});
样式设计技巧
1. 自定义颜色方案
通过rgb或cmyk函数设置元素颜色，打造品牌一致的表单风格：
// 设置主题色
const primaryColor = rgb(0.2, 0.4, 0.8); // 蓝色
const secondaryColor = rgb(0.9, 0.3, 0.3); // 红色
// 应用到表单元素
nameField.addToPage(page, {
borderColor: primaryColor,
textColor: secondaryColor,
backgroundColor: rgb(0.98, 0.98, 0.98)
});
2. 字体与排版
嵌入自定义字体并调整文本样式，提升表单可读性：
// 嵌入中文字体
const sourceHanFont = await pdfDoc.embedFont(await fetchFont('SourceHanSansCN-Regular.ttf'));
// 设置字段字体
addressField.updateAppearances(sourceHanFont);
addressField.setFontSize(14);
保存与导出PDF
完成表单设计后，将文档保存为字节流并下载或展示：
// 保存为字节流
const pdfBytes = await pdfDoc.save();
// 在浏览器中下载
saveByteArray('申请表单.pdf', pdfBytes);
// 辅助函数：保存字节流为文件
function saveByteArray(fileName, byte) {
const blob = new Blob([byte], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
}
高级功能
表单验证
通过代码限制输入内容，确保数据有效性：
// 设置文本框最大长度
const phoneField = form.createTextField('phone');
phoneField.setMaxLength(11);
phoneField.setText('请输入手机号');
// 尝试输入超过限制的文本会抛出错误
try {
phoneField.setText('138001380001');
} catch (e) {
console.error('手机号过长:', e.message);
}
动态表单
根据用户输入显示或隐藏字段，实现智能表单逻辑：
// 伪代码：根据单选按钮显示不同字段
genderField.onChange(value => {
if (value === 'other') {
showCustomGenderField();
} else {
hideCustomGenderField();
}
});
完整示例代码
完整的表单创建示例可参考项目中的测试文件：
总结与进阶
通过本文学习，你已掌握使用pdf-lib创建交互式PDF表单的核心技能。如需进一步提升，可以探索：
- 表单数据的导入导出
- 数字签名功能集成
- PDF/A合规性设置
项目官方文档和源码提供了更多高级用法：
现在就动手创建你的第一个交互式PDF表单，让数据收集变得高效而专业！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
