2025年pdfmake完整入门教程：从零到精通-育师

2025年pdfmake完整入门教程：从零到精通

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

pdfmake是一个纯JavaScript实现的PDF文档生成库，支持客户端和服务端两种使用场景。通过本教程，你将学会如何在不同环境下安装配置pdfmake，掌握文档定义对象的核心概念，并能够创建包含文本、表格、图片等丰富内容的PDF文档。

项目概述

pdfmake是一个功能强大的PDF生成工具，具有以下核心特性：

纯JavaScript实现，无需依赖其他语言或插件
支持文本自动换行和多种对齐方式
提供编号列表和项目符号列表
强大的表格功能，支持合并单元格和自动分页
图片和矢量图形支持
灵活的样式系统和样式继承
页面页眉页脚设置
自定义页面尺寸和边距

环境准备与安装

环境要求

在开始使用pdfmake之前，请确保你的开发环境满足以下要求：

Node.js v18.0.0或更高版本（服务端使用）
现代浏览器支持（Chrome、Firefox、Safari等）
npm或yarn包管理工具

安装方法

方式一：Node.js环境安装

npm install pdfmake@0.3.0-beta.18

方式二：源码构建安装

git clone https://gitcode.com/gh_mirrors/pd/pdfmake cd pdfmake npm install npm run build

核心概念：文档定义对象

文档定义对象是pdfmake的核心概念，它是一个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' } ] };

实战演练：创建第一个PDF文档

服务端实现示例

创建basic-example.js文件：

const pdfmake = require('pdfmake'); const fonts = { Roboto: { normal: 'fonts/Roboto/Roboto-Regular.ttf', bold: 'fonts/Roboto/Roboto-Medium.ttf', italics: 'fonts/Roboto/Roboto-Italic.ttf', bolditalics: 'fonts/Roboto/Roboto-MediumItalic.ttf' } }; 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%'] ] } } ], 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] } } }; const pdfDoc = printer.createPdfKitDocument(docDefinition); pdfDoc.pipe(require('fs').createWriteStream('sales-report.pdf')); pdfDoc.end();

浏览器端实现示例

创建HTML文件：

<!DOCTYPE html> <html> <head> <title>pdfmake浏览器端示例</title> </head> <body> <button onclick="generatePdf()">生成PDF</button> <script> const docDefinition = { content: [ { text: '浏览器端PDF生成示例', style: 'header' }, { text: '当前时间: ' + new Date().toLocaleString(), style: 'subheader' }, { text: '这是一个在浏览器中直接生成的PDF文档。', style: 'content' } ], 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] } } }; function generatePdf() { pdfMake.createPdf(docDefinition).open(); } </script> </body> </html>

进阶功能

添加图片支持

pdfmake支持多种图片格式，包括本地图片和Base64编码图片：

const docDefinition = { content: [ { text: '图片示例', style: 'header' }, { image: 'examples/fonts/sampleImage.jpg', width: 300, alignment: 'center' } ] };

创建复杂表格

const docDefinition = { content: [ { text: '销售数据统计表', style: 'header' }, { table: { headerRows: 1, widths: ['*', 'auto', 100, '*'], body: [ ['产品名称', '类别', '销售额', '销量'], ['智能手机', '电子产品', '¥12,500,000', 5000], ['笔记本电脑', '电子产品', '¥8,900,000', 1500], ['运动鞋', '服装', '¥3,200,000', 8000] ] } } ] };

页面设置与页眉页脚

const docDefinition = { pageSize: 'A4', 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' } ] }; } };