前端生成PDF，pdfmake使用

背景

最近有个前端生成PDF的需求，就研究了下前端生成PDF的方式

发现pdfmake这个组件比较靠谱，地址：GitHub - bpampuch/pdfmake：纯 JavaScript 中的客户端/服务器端 PDF 打印 --- GitHub - bpampuch/pdfmake: Client/server side PDF printing in pure JavaScript，超过11K Star，说明比较成熟了

文档：PDF制作 --- pdfmake

基本使用

安装

npm install pdfmake

这样就可以生成一个简单的PDF

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

(<any>pdfMake).addVirtualFileSystem(pdfFonts);

const generatePdf = () => {
  const docDefinition = {
    content: "生成pdf",
  };
  pdfMake.createPdf(docDefinition).download();
}

设置中文字体

但组件默认字体不支持中文，生成的PDF中文乱码

下面来配置中文字体，简单来说就是利用组件提供的字体转换脚本，将通用字体文件转换成组件可使用的字体文件，手动加载进来就行 PDF制作 --- pdfmake

• 进入 ./node_modules/pdfmake/目录

• 在pdfmake目录下创建 examples/fonts 子目录

• 把你要使用的字符 .ttf 文件放入 examples/fonts 目录下，中文字体文件都比较大，可以进入电脑的字体文件夹，找一个小点的放进去或者下载自己想要的字体

• 在pdfmake目录执行 node build-vfs.js "./examples/fonts"

• 然后在build文件夹下会生成 vfs_fonts.js文件，这个文件就是我们要使用的字体文件，可以打开这个文件，能看到字体名称等信息

• 建议将vfs_fonts.js文件移动到您自己的文件夹结构中（不应位于 node_modules 文件夹中），node_modules文件夹可能会被框架缓存，更改可能不生效

然后下面示例就可以生成支持中文的PDF了

import * as pdfMake from "pdfmake/build/pdfmake";
import * as pdfFonts from '/public/fonts/vfs_fonts.js';

// 引入中文字体，避免转换的PDF中文乱码
pdfMake.fonts = {
  simfang: {
    normal: 'SIMFANG.TTF',
    bold: 'SIMFANG.TTF',
    italics: 'SIMFANG.TTF',
    bolditalics: 'SIMFANG.TTF',
  }
};
const generatePdf = () => {
  const docDefinition = {
    content: "生成pdf",
    defaultStyle: {
      font: 'simfang'
    },
  };
  pdfMake.createPdf(docDefinition).download();
}