2025最新pdfmake入门教程：从安装到生成第一个PDF文档只需10分钟
项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake 你还在为JavaScript PDF生成工具的复杂配置而烦恼吗？想快速掌握一个既支持客户端又支持服务端的PDF生成库吗？本文将带你10分钟内从零基础入门pdfmake，完成从环境搭建到生成第一个自定义PDF文档的全过程。读完本文你将学会：
- 在不同环境下安装和配置pdfmake
- 理解文档定义对象(Document Definition Object)的核心结构
- 使用文本、样式、列表等基础组件构建PDF
- 掌握客户端和服务端两种生成PDF的方法
- 解决常见的中文字体和性能问题
1. pdfmake简介与核心优势
pdfmake是一个基于JavaScript的PDF文档生成库，支持客户端和服务端两种使用场景。与其他PDF生成工具相比，它具有以下核心优势：
1.1 主要特性
- 纯JavaScript实现：无需依赖其他语言或插件
- 丰富的内容支持：文本、表格、图片、SVG、列表等
- 灵活的样式系统：支持内联样式、命名样式和样式继承
- 跨平台兼容：浏览器端直接生成或下载，Node.js服务端生成文件
- 完善的文档布局：支持页面设置、边距、页眉页脚、分页控制等
1.2 适用场景
| 使用场景 | 推荐指数 | 优势 |
|---|---|---|
| 前端动态报表生成 | ★★★★★ | 无需后端参与，减轻服务器负担 |
| 服务端批量PDF生成 | ★★★★☆ | 可集成到自动化工作流 |
| 在线文档导出功能 | ★★★★★ | 直接在浏览器生成，提升用户体验 |
| 复杂布局报告 | ★★★★☆ | 强大的表格和样式系统 |
| 高频生成场景 | ★★★☆☆ | 可通过缓存优化性能 |
2. 快速安装与环境配置
2.1 环境要求
pdfmake对环境要求非常低，只需满足：
- Node.js环境：v18.0.0或更高版本（服务端使用）
- 浏览器支持：所有现代浏览器（IE不推荐）
- npm或yarn包管理工具
2.2 安装方式
2.2.1 Node.js环境安装
# 使用npm安装
npm install pdfmake@0.3.0-beta.18
# 使用yarn安装
yarn add pdfmake@0.3.0-beta.18
2.2.2 浏览器环境引入
推荐使用国内CDN以获得更好的访问速度：
<!-- 引入pdfmake核心库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/pdfmake.min.js"></script>
<!-- 引入Roboto字体包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/vfs_fonts.js"></script>
2.2.3 源码安装
如果你需要自定义或贡献代码，可以从Git仓库克隆源码：
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/pd/pdfmake
cd pdfmake
# 安装依赖
npm install
# 构建项目
npm run build
3. 核心概念：文档定义对象(DocDefinition)
pdfmake使用文档定义对象(Document Definition Object) 来描述PDF的内容和结构。这是一个普通的JavaScript对象，包含了PDF的所有信息。
3.1 基本结构
文档定义对象的基本结构如下：
const docDefinition = {
// 页面设置
pageSize: 'A4', // 页面大小
pageOrientation: 'portrait', // 页面方向
pageMargins: [40, 60, 40, 60], // 页边距 [左, 上, 右, 下]
// 样式定义
styles: {
header: { fontSize: 18, bold: true },
subheader: { fontSize: 15, bold: true, margin: [0, 10, 0, 5] },
content: { fontSize: 12, margin: [0, 5, 0, 5] }
},
// 内容
content: [
{ text: '这是标题', style: 'header' },
{ text: '这是副标题', style: 'subheader' },
{ text: '这是正文内容', style: 'content' }
],
// 页眉页脚
header: '这是页眉',
footer: (currentPage, pageCount) => `第 ${currentPage} 页，共 ${pageCount} 页`
};
3.2 内容类型
pdfmake支持多种内容类型，主要包括：
4. 快速上手：生成第一个PDF
4.1 服务端(Node.js)实现
步骤1：创建项目并安装依赖
# 创建项目目录
mkdir pdfmake-demo
cd pdfmake-demo
# 初始化项目
npm init -y
# 安装pdfmake
npm install pdfmake@0.3.0-beta.18
步骤2：创建基本示例文件
创建basic-example.js文件：
// 引入pdfmake
const pdfmake = require('pdfmake');
// 定义字体
const fonts = {
Roboto: {
normal: 'node_modules/pdfmake/build/fonts/Roboto/Roboto-Regular.ttf',
bold: 'node_modules/pdfmake/build/fonts/Roboto/Roboto-Medium.ttf',
italics: 'node_modules/pdfmake/build/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'node_modules/pdfmake/build/fonts/Roboto/Roboto-MediumItalic.ttf'
}
};
// 创建pdfmake实例
const printer = new pdfmake(fonts);
// 定义文档内容
const docDefinition = {
content: [
{ text: '2025年销售报告', style: 'header' },
{ text: '生成日期: ' + new Date().toLocaleDateString(), style: 'subheader' },
{ text: '1. 概述', style: 'sectionHeader' },
{ text: '本报告总结了2025年第一季度的销售情况，包括各产品线的销售数据、市场份额和客户反馈。', style: 'content' },
{ text: '2. 销售数据', style: 'sectionHeader' },
{
style: 'tableExample',
table: {
headerRows: 1,
widths: [60, '*', '*', '*'],
body: [
['产品类别', '销售额(万元)', '同比增长', '目标完成率'],
['电子产品', 1250, '+15%', '108%'],
['家居用品', 890, '+8%', '95%'],
['服装鞋帽', 620, '+22%', '112%'],
['食品饮料', 480, '+5%', '92%']
]
}
},
{ text: '3. 结论', style: 'sectionHeader' },
{ text: '总体来看，2025年第一季度销售情况良好，各产品线均实现正增长，其中服装鞋帽类别表现突出。', style: 'content' }
],
// 样式定义
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
subheader: {
fontSize: 14,
bold: true,
margin: [0, 10, 0, 5],
color: '#666'
},
sectionHeader: {
fontSize: 16,
bold: true,
margin: [0, 15, 0, 5]
},
content: {
fontSize: 12,
margin: [0, 5, 0, 5]
},
tableExample: {
margin: [0, 10, 0, 15]
}
}
};
// 生成PDF
const pdfDoc = printer.createPdfKitDocument(docDefinition);
pdfDoc.pipe(require('fs').createWriteStream('sales-report.pdf'));
pdfDoc.end();
console.log('PDF生成完成！');
步骤3：运行并生成PDF
node basic-example.js
运行成功后，当前目录下会生成sales-report.pdf文件。
4.2 浏览器端实现
创建browser-example.html文件：
<!DOCTYPE html>
<html>
<head>
<title>pdfmake浏览器端示例</title>
<!-- 引入pdfmake库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/pdfmake.min.js"></script>
<!-- 引入字体文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/vfs_fonts.js"></script>
</head>
<body>
<button onclick="generatePdf()">生成PDF</button>
<button onclick="downloadPdf()">下载PDF</button>
<script>
// 检查字体是否加载成功
console.log('字体是否可用:', pdfMake.vfs ? '是' : '否');
// 文档定义
const docDefinition = {
content: [
{ text: '浏览器端PDF生成示例', style: 'header' },
{ text: '当前时间: ' + new Date().toLocaleString(), style: 'subheader' },
{
text: '这是一个在浏览器中直接生成的PDF文档。pdfmake支持客户端和服务端两种模式，非常灵活。',
style: 'content'
},
{
ul: [
'纯JavaScript实现，无需后端支持',
'直接在浏览器中生成，保护用户数据隐私',
'支持下载、打印或在新窗口查看',
'丰富的内容和样式控制'
],
style: 'list'
}
],
styles: {
header: {
fontSize: 20,
bold: true,
margin: [0, 0, 0, 15]
},
subheader: {
fontSize: 14,
color: '#888',
margin: [0, 0, 0, 10]
},
content: {
fontSize: 12,
margin: [0, 5, 0, 15]
},
list: {
margin: [0, 5, 0, 15],
fontSize: 12
}
}
};
// 生成并在新窗口打开PDF
function generatePdf() {
pdfMake.createPdf(docDefinition).open();
}
// 生成并下载PDF
function downloadPdf() {
pdfMake.createPdf(docDefinition).download('browser-demo.pdf');
}
</script>
</body>
</html>
直接在浏览器中打开该HTML文件，点击按钮即可生成或下载PDF。
5. 进阶功能
5.1 添加图片
pdfmake支持添加多种格式的图片，包括本地图片和网络图片：
// 图片示例
const docDefinition = {
content: [
{
text: '图片示例',
style: 'header'
},
{
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bxSIVh1YQcYhQnSyIiuimVShChVArtOpgcukXNGlI0wmUuR7Rxl44+LmI4q4pK4PfX6z5W3y4z7r5B4P32CFcQmbk5R58v58y6P3X7fH79P7/f3/f3/f3/f3/f3/f3/f3/f3/f3f4A/6HP3ugAAAABJRU5ErkJggg==',
width: 150,
height: 150,
alignment: 'center'
},
{
text: '网络图片',
style: 'subheader'
},
{
image: 'https://picsum.photos/200/300',
width: 200,
height: 300,
margin: [0, 10, 0, 10]
}
]
};
5.2 创建表格
pdfmake的表格功能非常强大，支持合并单元格、自定义样式和复杂布局：
// 复杂表格示例
const docDefinition = {
content: [
{ text: '销售数据统计表', style: 'header' },
{
table: {
// 表头行数
headerRows: 2,
// 列宽，*表示自动分配剩余空间
widths: [ '*', 'auto', 100, '*' ],
// 表格内容
body: [
[
{ text: '产品信息', colSpan: 2, alignment: 'center', bold: true },
{},
{ text: '销售数据', colSpan: 2, alignment: 'center', bold: true },
{}
],
[
{ text: '产品名称', bold: true },
{ text: '类别', bold: true },
{ text: '销售额', bold: true },
{ text: '销量', bold: true }
],
[ '智能手机', '电子产品', '¥12,500,000', 5000 ],
[ '笔记本电脑', '电子产品', '¥8,900,000', 1500 ],
[ '运动鞋', '服装', '¥3,200,000', 8000 ],
[ '连衣裙', '服装', '¥2,800,000', 6500 ],
[
{ text: '总计', colSpan: 2, bold: true },
{},
{ text: '¥27,400,000', bold: true },
{ text: 21000, bold: true }
]
]
},
// 表格样式
layout: {
fillColor: function(rowIndex, node, columnIndex) {
// 表头行颜色
if (rowIndex < 2) {
return '#CCCCCC';
}
// 交替行颜色
return (rowIndex % 2 === 0) ? '#F5F5F5' : null;
}
}
}
]
};
5.3 自定义页面设置
// 自定义页面设置
const docDefinition = {
// 页面大小，支持A4, Letter, Legal等标准尺寸，或自定义尺寸[宽度, 高度]
pageSize: 'A4',
// 页面方向，portrait(纵向)或landscape(横向)
pageOrientation: 'portrait',
// 页边距 [左, 上, 右, 下]
pageMargins: [40, 60, 40, 60],
// 页眉
header: {
columns: [
{ text: '公司内部文档', style: 'header' },
{ text: '机密', style: 'headerRight' }
]
},
// 页脚
footer: function(currentPage, pageCount) {
return {
columns: [
{ text: '文档版本: 1.0', style: 'footer' },
{ text: `第 ${currentPage} 页，共 ${pageCount} 页`, style: 'footer', alignment: 'right' }
]
};
},
// 背景层
background: function(currentPage, pageCount) {
// 第一页添加水印
if (currentPage === 1) {
return {创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
