前言

在数字化时代，PDF作为一种便捷的文件格式，广泛应用于报告、文档分享、合同签订等多个领域。然而，传统的PDF制作方式往往需要后端支持，对于一些追求效率的前端开发者来说，这无疑增加了工作难度。幸运的是，PDFMake的出现，为前端开发者提供了一个全新的PDF制作解决方案。

PDFMake简介

PDFMake是一个基于JavaScript的PDF生成库，它允许你在浏览器中直接生成PDF文档。其强大的功能和高性能使得它成为前端PDF制作的理想选择。PDFMake不仅支持基本的文本、图像和表格生成，还提供了丰富的自定义选项，满足各种复杂的PDF需求。

安装与基本使用

首先，你需要在你的项目中安装PDFMake。通过npm安装，你可以轻松地将PDFMake集成到你的项目中：

npm install pdfmake

安装完成后，你可以使用以下代码生成一个简单的PDF文档：

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

// 注册字体
pdfMake.addVirtualFileSystem(pdfFonts);

const generatePdf = () => {
  const docDefinition = {
    content: '这是一个简单的PDF文档',
  };
  pdfMake.createPdf(docDefinition).download('example.pdf');
};

中文字体配置

在使用PDFMake生成中文文档时，字体配置是一个常见的问题。由于PDFMake默认不支持中文字符，你需要手动配置中文字体。以下是具体步骤：

1. 准备中文字体文件：首先，你需要准备一个中文字体文件（如.ttf格式），并将其放置在项目的特定目录下。

2. 创建字体文件夹：在项目根目录下创建一个名为fonts的文件夹，并将字体文件放入其中。

3. 配置字体：在项目中创建一个JavaScript文件（如fontConfig.js），并添加以下代码：

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

// 引入字体文件
pdfMake.addVirtualFileSystem(pdfFonts);

// 配置中文字体
pdfMake.fonts = {
  'simfang': {
    normal: 'fonts/simfang.ttf',
    bold: 'fonts/simfang.ttf',
    italics: 'fonts/simfang.ttf',
    bolditalics: 'fonts/simfang.ttf',
  },
};

const generatePdf = () => {
  const docDefinition = {
    content: '这是一个支持中文的PDF文档',
    defaultStyle: { font: 'simfang' },
  };
  pdfMake.createPdf(docDefinition).download('example.pdf');
};

4. 引入字体配置文件：在你的主JavaScript文件中，引入刚刚创建的字体配置文件：

import './fontConfig.js';

高级应用

PDFMake不仅限于基本的文本和图像生成，还可以创建复杂的表格和图形。以下是一个示例，展示如何在PDF中插入一个表格：

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

pdfMake.addVirtualFileSystem(pdfFonts);

const generatePdf = () => {
  const docDefinition = {
    content: [
      { text: '这是一个表格', style: 'header' },
      {
        table: {
          headerRows: 1,
          widths: ['*', '*', '*'],
          body: [
            ['姓名', '年龄', '职业'],
            ['张三', '28', '软件工程师'],
            ['李四', '32', '项目经理'],
          ],
        },
      },
    ],
  };
  pdfMake.createPdf(docDefinition).download('example.pdf');
};

结语

PDFMake的出现，极大地简化了前端PDF制作的复杂性。通过本文的介绍，相信你已经掌握了PDFMake的基本使用方法，并了解了如何配置中文字体以支持中文文档的生成。无论是简单的文本文档还是复杂的表格图形，PDFMake都能为你提供强大的支持。现在，赶快尝试一下，让你的前端项目也能轻松生成高质量的PDF文档吧！