前端导出PDF之pdfmake

pdfmake通过编辑特定格式的 pdf描述对象,传给pafmake ,来生成pdf

默认pdfmake不支持中文

如何支持中文

要支持中文,就需要配置中文字体。根据文档介绍有两种方式:1.使用在线字体配置。2.使用本地 vfs(virtual file system)配置字体。本文介绍第二种。

文档描述的步骤:

  • Install pdfmake npm install pdfmake

    安装 pdfmake

  • Go to package directory ./node_modules/pdfmake/

    进入 ./node_modules/pdfmake/目录

  • Create the examples/fonts subdirectory in your pdfmake code directory, if it doesn’t already exist.

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

  • Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.

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

  • Run command node build-vfs.js "./examples/fonts". Or run node build-vfs.js to show help.

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

  • Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).

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

以上我们就生成了中文字体

如何使用

// 在项目里引入pdfmake
import pdfMake from "pdfmake/build/pdfmake";

// 我把上面生成的字体放入了 vue 中的static文件夹,我使用的是FZYTK.TTF
// 这样直接引入就可以,不需要额外引入原字体文件(FZYTK.TTF)
const vfs_fonts = require('../xxx/static/vfs_fonts');
pdfMake.vfs = vfs_fonts;

// 定义字体 
pdfMake.fonts = {
    // webfont是字体名,可以自定义,下面需要用这个名字配置字体
    webfont: {
        // FZYTK.TTF 这个文件已经在 我们生成的 vfs_font.js 文件中,且已经引入,所以可以直接使用
        normal: "FZYTK.TTF",
        bold: "FZYTK.TTF",
        italics: "FZYTK.TTF",
        bolditalics: "FZYTK.TTF",
    },
    // 可以定义多个字体
    anotherFontName: {
     (...)
    },
};

// 下面我们来定义 pdfmake需要用的 pdf文件描述对象
// 这个描述对象 具体的字段可以参考官方文档
var docDefinition = {
    content: "这是一段中文。welcome to China",
    defaultStyle: {
        // 设置我们定义的字体为默认字体
        font: "webfont",
    },
};

pdfMake.createPdf(docDefinition).download("文件名", () => {
    console.log("complete");
});

你可能感兴趣的:(前端导出PDF之pdfmake)