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

最新推荐文章于 2024-05-10 10:01:01 发布

allway2

最新推荐文章于 2024-05-10 10:01:01 发布

阅读量2.3k

点赞数

文章标签： python 开发语言后端

本文链接：https://blog.csdn.net/allway2/article/details/121612493

版权

通过虚拟文件系统 (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 个步骤：

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

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>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pdfmake 客户端浏览器中JavaScript创建PDF配置中文字体

通过虚拟文件系统 (VFS)本文仅供客户端使用（浏览器中）！对于服务器端使用真实字体文件。最低版本：0.1.72文件兼容。对于旧版本，请使用 gulp。pdfmake 使用第二个文件：vfs_fonts.js用于您希望嵌入到生成的 PDF 中的字体（和其他文件）。当您node build-vfs.js "./examples/fonts"在 pdfmake 包目录中运行命令时，build/vfs_fonts.js会创建一个新文件，其中包含来自本地子目录（在键/值对象中）的所有文件的嵌入.
复制链接

扫一扫