vue2使用pdfmake

前言

电脑操作系统：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文档效果如下：