当前位置：首页 > news >正文

vue2使用pdfmake

news 2025/5/23 6:18:48

前言

电脑操作系统：windows11

node.js版本：v14.21.3

pdfmake版本：^0.2.20

pdfmake官网文档：https://pdfmake.github.io/docs/0.1/

包下载与引入

下载

npm install pdfmake

引入

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.addVirtualFileSystem(pdfFonts);

引入字体

系统默认给的字体(Roboto)仅支持英文，使用中文会出现乱码，对于国内来说没有中文是不可能的，所以需要引入字体来支持中文。

url链接方式引入（不推荐）

第一步，添加字体：

pdfMake.addFonts({Roboto: {normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'}
})

第二步，使用字体：

let docDefinition = {content: (...),defaultStyle: {font: 'Roboto'}
}

这种方式仅适用于个人学习，实际生活中项目都是部署在内网环境中的，与外网隔绝，不可能做到随时下载字体的要求。

本地字体文件引入（推荐）

创建`vfs_fonts.js文件`

1、本文以“仿宋”字体为例，项目中创建文件夹“src/utils/fonts/simfang”，将 simfang.ttf 字体文件放在该目录下；

2、打开命令窗口，进入"项目目录/node_modules/pdfmake"目录下，执行以下命令：

node build-vfs.js "D:\pdfmakeTest\src\utils\fonts\simfang" "D:\pdfmakeTest\src\utils\fonts\simfang\vfs_fonts.js"

第一个路径指存放本地字体文件的目录，只需要指定到目录级别，就会自动识别加载该目录下所有的字体文件；第二个目录指生成的js文件路径，具体到文件名，文件名可以自定义。

3、上述命令执行后，就会生成字体js文件，如下图所示：

js中使用 `pdfMake.addFonts(...) 加载本地字体`

pdfMake.addFonts({Roboto: {normal: 'Roboto-Regular.ttf',bold: 'Roboto-Medium.ttf',italics: 'Roboto-Italic.ttf',bolditalics: 'Roboto-Italic.ttf'},simfang: {normal: 'simfang.ttf',bold: 'simfang.ttf',italics: 'simfang.ttf',bolditalics: 'simfang.ttf'}
})

pdfMake全局设置默认字体

let docDefinition = {content: (...),defaultStyle: {font: 'simfang'}
}

设置pdf文档内容

可以自定义对pdf文档内容添加普通文字、链接、表格等，具体可参考文档。完整代码如下：

<template><div><el-button @click="exportPdf">导出PDF</el-button></div>
</template><script>
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "@/utils/fonts/simfang/vfs_fonts";export default {name: "PdfTest",methods: {exportPdf() {pdfMake.addFonts({Roboto: {normal: 'simfang.ttf',bold: 'simfang.ttf',italics: 'simfang.ttf',bolditalics: 'simfang.ttf'},simfang: {normal: 'simfang.ttf',bold: 'simfang.ttf',italics: 'simfang.ttf',bolditalics: 'simfang.ttf'}})let docDefinition = {header: '这是页眉',footer: {text: '这是页脚', alignment: 'right'},watermark: {text: '水印123', opacity: 0.5, angle: 30},content: [{text: '标题', style: 'header'},{text: '第一行文字!', fontSize: 16, bold: true},{text: '第二行文字', fontSize: 12, bold: false, alignment: 'justify'},{columns: [{width: 'auto',text: '第一列'},{width: '*',text: '第二列'},{width: 100,text: '第三列'},{width: '20%',text: '第四列'}],columnGap: 10},{qr: '二维码', fit: '150'},{table: {headerRows: 1,widths: ['25%', '25%', '25%', '25%'],body: [['姓名', '性别', '年龄', '身高'],['张三', '男', '22', '55kg'],['李四', '女', '18', '45kg']]}}],styles: {header: {fontSize: 30,bold: true,margin: [0, 0, 0, 10]}}};pdfMake.addVirtualFileSystem(pdfFonts);pdfMake.createPdf(docDefinition).open();// pdfMake.createPdf(docDefinition).download();}}
}
</script>

pdf文档效果如下：