pdfmake 客户端浏览器中JavaScript创建PDF配置中文字体
夏俊人
通过虚拟文件系统 (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>
类似资料：