当前位置: 首页 > 工具软件 > pdfmake > 使用案例 >

pdfmake 客户端浏览器中JavaScript创建PDF配置中文字体

夏俊人
2023-12-01

通过虚拟文件系统 (VFS)

本文仅供客户端使用(浏览器中)!对于服务器端使用真实字体文件
最低版本:0.1.72 文件兼容。对于旧版本,请使用 gulp。

pdfmake 使用第二个文件:vfs_fonts.js用于您希望嵌入到生成的 PDF 中的字体(和其他文件)。

当您node build-vfs.js "./examples/fonts"在 pdfmake 包目录中运行命令时,build/vfs_fonts.js会创建一个新文件,其中包含来自本地子目录(在键/值对象中)的所有文件的嵌入副本examples/fontspdfMake.vfs

详细说明

要使用自定义字体,需要 3 个步骤:

  1. 创建一个vfs_fonts.js包含字体文件的新文件
  2. pdfMake.fonts在您的 javascript 中分配
  3. 在您的文档定义中指定字体

1.创建一个新的vfs_fonts.js包含你的字体文件 

  • 安装pdfmake npm install pdfmake
  • 进入包目录 ./node_modules/pdfmake/
  • examples/fonts如果它不存在,则在 pdfmake 代码目录中创建子目录。
  • 将您的字体(以及您希望嵌入的其他文件)复制到examples/fonts子目录中。
  • 运行命令node build-vfs.js "./examples/fonts"。或运行node build-vfs.js以显示帮助。
  • 在代码中包含新的build/vfs_fonts.js文件(与包含pdfmake.js或 的方式相同pdfmake.min.js)。

上述步骤嵌入了所有文件examples/fonts(到本地键/值变量中pdfMake.vfs)——不仅仅是字体。这意味着您可以将图像放在那里,运行node build-vfs.js "./examples/fonts,并在您的文档定义对象中通过文件名引用它们。

您不再需要引用这些文件,examples/fonts因为所有文件都已复制到vfs_fonts.js.

其他方法:

2.pdfMake.fonts在你的javascript中赋值 

在您的代码中,在调用pdfMake.createPdf(docDefinition)set之前pdfMake.fonts,如下例所示(注意我们不指定路径,只指定文件名):

pdfMake.fonts = {
  yourFontName: {
    normal: 'fontFile.ttf',
    bold: 'fontFile2.ttf',
    italics: 'fontFile3.ttf',
    bolditalics: 'fontFile4.ttf'
  },
  anotherFontName: {
    (...)
  },

  // example of usage fonts in collection   PingFangSC: {
    normal: ['pingfang.ttc', 'PingFangSC-Regular'],
    bold: ['pingfang.ttc', 'PingFangSC-Semibold'],
  }
}

此处定义的键将用作文档定义样式中的字体名称。

每个字体系列都定义了 4 个属性:正常、粗体、斜体和粗斜体指的是适当的文件(您嵌入的文件examples/fonts/)。您应该定义所有 4 个组件(即使它们都指向同一个字体文件)。

默认情况下 pdfmake 使用以下字体结构:

pdfMake.fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Medium.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-MediumItalic.ttf'
  }
};

或者,您可以将fonts对象直接传递给createPdf

pdfMake.createPdf(docDefinition, null, fonts)

// The full signature of createPdf looks like this. // tableLayouts, fonts and vfs are all optional - falsy values will cause // pdfMake.tableLayouts, pdfMake.fonts or pdfMake.vfs to be used. pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)

3.在你的文档定义中指定字体 

pdfMake 使用“Roboto”作为默认字体,因此为了使用您的字体,您应该在您的文档定义对象中指定它。

最简单的方法是在defaultStyle中全局设置

var docDefinition = {
  content: (...),
  defaultStyle: {
    font: 'yourFontName'
  }
}

完整例子

<!DOCTYPE html>
<html>
    <head>
        <title>PDF Make</title>
        <!-- https://cdnjs.com/libraries/pdfmake -->
        <script src="pdfmake.min.js"></script>
        <script src="vfs_fonts.js"></script>
        <script>
            function goPDF() {
                // (A) SET FONTS
                pdfMake.fonts = {
                    STSONG: {
                        normal: 'STSONG.TTF',
                        bold: 'STSONG.TTF',
                        italics: 'STSONG.TTF',
                        bolditalics: 'STSONG.TTF'
                    }
                };

                // (B) CREATE + DOWNLOAD
                pdfMake
                        .createPdf({
                            content: [
                                'Foo Bar',
                                'Hello World中文',
                            ],
                            defaultStyle: {
                                font: 'STSONG'
                            }
                        })
                        .download('hello-world.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="goPDF()">Create PDF</button>
    </body>
</html>

 类似资料: