如何在 Vue.js 3 中使用 pdfmake 和 vfs_fonts 生成 PDF：综合指南

2024-03-11 08:15:04

使用 Vue.js 3、pdfmake 和 vfs_fonts 生成 PDF：深入指南

简介

使用 pdfmake 在 Vue.js 3 中生成 PDF 文件提供了很大的灵活性，但可能会遇到一些挑战，尤其是当需要集成自定义字体时。本指南将详细介绍如何配置 pdfmake 和 vfs_fonts，以便在 Vue.js 3 项目中生成 PDF 文件，包含自定义字体。

第一步：安装依赖项

首先，通过以下命令安装 pdfmake 和 vue3-pdfmake 依赖项：

npm install pdfmake vue3-pdfmake

第二步：注册 PDFPlugin

接下来，在 main.js 文件中注册 PDFPlugin，使 Vue 组件可以访问 pdfmake 功能：

import { PDFPlugin } from 'vue3-pdfmake';

createApp({
  components: {
    PDFPlugin
  }
}).use(router).use(PDFPlugin).mount('#app');

第三步：配置 vfs_fonts

为了支持自定义字体，需要配置 vfs_fonts。在 Vue 组件中，导入 pdfmake vfs_fonts 并执行以下步骤：

import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  CustomFont: {
        normal: 'custom_font.ttf',
        bold:   'custom_font_bold.ttf'
    }
}

const defaultStyle = 'CustomFont';

这里，CustomFont 是自定义字体的名称，custom_font.ttf 和 custom_font_bold.ttf 是正常和粗体字体的文件路径。

第四步：生成 PDF

配置完成后，可以在 Vue 组件中使用 pdfmake 创建 PDF 文件。以下是一个示例：

const pdfmake = usePDF({
  autoInstallVFS: true
})

const onGenPDF = () => {
  pdfmake.createPdf({
    content: [
      'PDF 文件生成使用自定义字体 ' + defaultStyle + '...'
    ],
    defaultStyle: {
      font: defaultStyle
    }
  }).download();
}

示例代码

以下是包含所有步骤的示例 Vue 组件：

<template>
  <button @click="onGenPDF">生成 PDF</button>
</template>

<script setup>
import { usePDF } from 'vue3-pdfmake';

import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

pdfMake.fonts = {
  CustomFont: {
        normal: 'custom_font.ttf',
        bold:   'custom_font_bold.ttf'
    }
}

const defaultStyle = 'CustomFont';

const pdfmake = usePDF({
  autoInstallVFS: true
})

const onGenPDF = () => {
  pdfmake.createPdf({
    content: [
      'PDF 文件生成使用自定义字体 ' + defaultStyle + '...'
    ],
    defaultStyle: {
      font: defaultStyle
    }
  }).download();
}
</script>