如何快速掌握pdfmake：从零开始的JavaScript PDF生成终极指南-程序员充电站

如何快速掌握pdfmake：从零开始的JavaScript PDF生成终极指南

【免费下载链接】pdfmakeClient/server side PDF printing in pure JavaScript项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake

还在为JavaScript PDF生成工具的复杂配置而烦恼吗？想快速掌握一个既支持客户端又支持服务端的PDF生成库吗？本文将带你从零基础入门pdfmake，完成从环境搭建到生成第一个自定义PDF文档的全过程。读完本文你将学会：

在不同环境下安装和配置pdfmake
理解文档定义对象(Document Definition Object)的核心结构
使用文本、样式、列表等基础组件构建PDF
掌握客户端和服务端两种生成PDF的方法

pdfmake简介与核心优势

pdfmake是一个基于JavaScript的PDF文档生成库，支持客户端和服务端两种使用场景。与其他PDF生成工具相比，它具有以下核心优势：

主要特性

纯JavaScript实现：无需依赖其他语言或插件
丰富的内容支持：文本、表格、图片、SVG、列表等
灵活的样式系统：支持内联样式、命名样式和样式继承
跨平台兼容：浏览器端直接生成或下载，Node.js服务端生成文件
完善的文档布局：支持页面设置、边距、页眉页脚、分页控制等

适用场景

使用场景	推荐指数	优势
前端动态报表生成	★★★★★	无需后端参与，减轻服务器负担
服务端批量PDF生成	★★★★☆	可集成到自动化工作流
在线文档导出功能	★★★★★	直接在浏览器生成，提升用户体验
复杂布局报告	★★★★☆	强大的表格和样式系统

快速安装与环境配置

环境要求

pdfmake对环境要求非常低，只需满足：

Node.js环境：v18.0.0或更高版本（服务端使用）
浏览器支持：所有现代浏览器（IE不推荐）
npm或yarn包管理工具

安装方式

Node.js环境安装

# 使用npm安装 npm install pdfmake@0.3.0-beta.18 # 使用yarn安装 yarn add pdfmake@0.3.0-beta.18

浏览器环境引入

推荐使用CDN以获得更好的访问速度：

<!-- 引入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>

源码安装

如果你需要自定义或贡献代码，可以从Git仓库克隆源码：

# 克隆仓库 git clone https://gitcode.com/gh_mirrors/pd/pdfmake cd pdfmake # 安装依赖 npm install # 构建项目 npm run build

核心概念：文档定义对象(DocDefinition)

pdfmake使用文档定义对象(Document Definition Object)来描述PDF的内容和结构。这是一个普通的JavaScript对象，包含了PDF的所有信息。

基本结构

文档定义对象的基本结构如下：

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} 页` };

快速上手：生成第一个PDF

服务端(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文件。

浏览器端实现

创建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。

进阶功能

添加图片

pdfmake支持添加多种格式的图片，包括本地图片和网络图片：

// 图片示例 const docDefinition = { content: [ { text: '图片示例', style: 'header' }, { image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bxSIVh1YQcYhQnSyIiuimVShChVArtOpgcukXNGlI0wmUuR7Rxl44+LmI4q4pK4PfX6z5W3y4z7r5B4P32CFcQmbk5R58v58y6P3X7fH79P7/f3/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] } ] };

创建表格

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; } } } ] };

自定义页面设置

// 自定义页面设置 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' } ] }; } };

常见问题解决方案

中文字体支持问题

pdfmake默认使用Roboto字体，如果需要支持中文，需要添加中文字体文件：

const fonts = { Roboto: { normal: 'fonts/Roboto-Regular.ttf', bold: 'fonts/Roboto-Medium.ttf', italics: 'fonts/Roboto-Italic.ttf', bolditalics: 'fonts/Roboto-MediumItalic.ttf' }, SimSun: { normal: 'fonts/simsun.ttf', bold: 'fonts/simsunbd.ttf', italics: 'fonts/simsun.ttf', bolditalics: 'fonts/simsunbd.ttf' } }; // 在文档定义中指定使用中文字体 const docDefinition = { defaultStyle: { font: 'SimSun' }, content: [ { text: '中文标题', style: 'header' }, { text: '这是中文内容', style: 'content' } ] };

性能优化建议

对于大量数据表格，使用分页显示
图片使用适当的分辨率，避免过大文件
在服务端生成时，考虑使用缓存机制

学习路线图

基础阶段：掌握文档定义对象的基本结构和常用组件
进阶阶段：学习复杂表格、样式继承、动态内容等高级功能
实战阶段：结合具体业务场景，开发完整的PDF生成功能

通过本指南的学习，你将能够熟练使用pdfmake在各种场景下生成专业的PDF文档。这个强大的JavaScript库将为你提供灵活的PDF生成解决方案，无论是前端动态报表还是服务端批量处理，都能轻松应对。

【免费下载链接】pdfmakeClient/server side PDF printing in pure JavaScript项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

如何快速掌握pdfmake：从零开始的JavaScript PDF生成终极指南