首页
/ 2025最新pdfmake入门教程：从安装到生成第一个PDF文档只需10分钟

2025最新pdfmake入门教程：从安装到生成第一个PDF文档只需10分钟

2026-02-05 04:32:02作者：伍霜盼Ellen
pdfmake
Client/server side PDF printing in pure JavaScript
项目地址：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生成工具相比，它具有以下核心优势：

pie
    title pdfmake核心能力分布
    "文档结构" : 30
    "样式系统" : 25
    "跨平台支持" : 20
    "性能优化" : 15
    "扩展性" : 10

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支持多种内容类型，主要包括：

flowchart TD
    A[内容类型] --> B[文本(Text)]
    A --> C[表格(Table)]
    A --> D[图片(Image)]
    A --> E[列表(List)]
    A --> F[列(Columns)]
    A --> G[SVG]
    A --> H[附件(Attachment)]
    
    B --> B1[普通文本]
    B --> B2[格式化文本]
    B --> B3[链接文本]
    
    C --> C1[简单表格]
    C --> C2[复杂表格(合并单元格)]

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 {
pdfmake
Client/server side PDF printing in pure JavaScript
项目地址：https://gitcode.com/gh_mirrors/pd/pdfmake
登录后查看全文

相关内容推荐

1 告别繁琐PDF生成：pdfmake动态模板系统让数据展示更高效2 【亲测免费】 pdfmake：纯JavaScript实现的客户端/服务器端PDF打印库3 HTML转PDF神器：html-to-pdfmake使用指南4 【亲测免费】 PDFMake：纯JavaScript的客户端/服务器端PDF生成库5 HTML 转 PDFMake 使用教程6 在pdfmake中渲染数学公式的技术方案7 HTML 转 PDFMake 项目安装和配置指南8 【亲测免费】 探索HTML到PDFMake的转换神器：html-to-pdfmake9 解决pdfmake在Angular项目中Header图片显示异常问题10 解决pdfmake项目中Roboto字体文件未找到的问题
热门项目推荐
相关项目推荐

热门内容推荐

1 【亲测免费】 开源项目 `build-your-own-x` 使用指南2 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

MsgViewer终极指南：轻松打开MSG文件的免费邮件查看器PiliPlus终极体验指南：解锁B站第三方客户端的完整功能秘籍Shutter Encoder视频转换神器：从小白到高手的效率革命直播抢码实战秘籍：5步搞定智能扫码登录，成功率提升300%如何快速掌握SillyTavern版本更新：新手必看的完整操作手册Calibre路径保护插件：告别拼音目录，拥抱原生中文路径5分钟快速上手：文泉驿微米黑字体跨平台安装完整指南终极歌词下载指南：3大平台免费获取，打造完美音乐体验PDown百度网盘下载器：2025年免费极速下载解决方案终极YimMenu游戏增强工具：从安装到精通完整指南

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
532
3.74 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
178
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
886
596
pytorchpytorch
Ascend Extension for PyTorch
Python
340
403
flutter_flutterflutter_flutter
暂无简介
Dart
771
191
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
986
247
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
416
4.21 K
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
303
355