更改数据表pdfmaker扩展中的字体
H. *_*M.. 4 pdf fonts datatables
我已经用谷歌搜索了整整一天，并搜索了 StackOverflow 以找到更改 dataTables pdf 导出中的字体的解决方案。但是，我没有遇到解决方案。当我将表格导出为 pdf 时，脚本字体无法辨认。看看下面的图片就知道了。它显示了我的表格中的两列。
dataTables 论坛和 pdfMaker 文档都很模糊。任何人都可以帮我解决这个问题吗？我需要为数据表的 pdfMaker 扩展指定一种字体。以下是 vfs_fonts.js 的样子：
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
pdfMake.fonts = {
Vazir: {
normal: 'Vazir-FD.ttf',
bold: 'Vazir-FD.ttf',
italics: 'Vazir-FD.ttf',
bolditalics: 'Vazir-FD.ttf'
}
};
}以下也是我的数据表的按钮块：
buttons: [
{ extend: 'pdfHtml5', exportOptions:
{ columns: [0, 1, 2, 3, 4, 5, 6] },
customize: function (doc) {
doc.defaultStyle.font = Vazir},
},
]请注意，在上面的代码块中，当我添加“自定义”块时，pdfMaker 按钮将不会准备任何 pdf 报告；没有它，它可以工作，但是，字体无法辨认。提前致谢。
这是一个解决方案。
\n数据表代码
\nHTML如下：
\n<!doctype html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Export to PDF</title>\n <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>\n <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>\n <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">\n <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">\n\n <!-- buttons -->\n <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">\n <script src="https://code.jquery.com/jquery-3.3.1.js"></script>\n <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>\n <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>\n <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>\n\n \n <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>\n \n <!--\n <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>\n\n Build a custom local version of the vfs_fonts.js file, containing whatever fonts you need. The \n structure of the file is this:\n \n this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {\n "arial.ttf": "AAEAA...MYXRu",\n "another_one.ttf": "XXXX...XXXX"\n };\n\n Replace the "AAEAA...MYXRu" with the base64-encoded string of your font file.\n You can use this site to generate the string: https://dataurl.sveinbjorn.org/#dataurlmaker\n\n -->\n <script src="vfs_fonts.js"></script>\n \n\n <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>\n <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>\n\n</head>\n\n<body>\n\n<div style="margin: 20px;">\n\n<table id="example" class="display nowrap dataTable cell-border" style="width:100%">\n <thead>\n <tr>\n <th>Name</th>\n <th>Data</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Ad\xc3\xa9la\xc3\xafde Nixon</td>\n <td><font face="verdana">\xd8\xa7\xd9\x84\xd9\x81\xd8\xa8\xd8\xa7\xdb\x8c \xd9\x81\xd8\xa7\xd8\xb1\xd8\xb3\xdb\x8c \xdb\xb1\xdb\xb2\xdb\xb3\xdb\xb4</font></td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th>Name</th>\n <th>Data</th>\n </tr>\n </tfoot>\n </table>\n\n</div>\n\n<script type="text/javascript">\n\n $(document).ready(function() {\n $(\'#example\').DataTable({\n\n dom: \'Bfrtip\',\n buttons: [{\n extend: \'pdf\',\n customize: function ( doc ) {\n processDoc(doc);\n }\n }]\n });\n });\n\n function processDoc(doc) {\n //\n // https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/\n //\n // Update pdfmake\'s global font list, using the fonts available in\n // the customized vfs_fonts.js file (do NOT remove the Roboto default):\n pdfMake.fonts = {\n Roboto: {\n normal: \'Roboto-Regular.ttf\',\n bold: \'Roboto-Medium.ttf\',\n italics: \'Roboto-Italic.ttf\',\n bolditalics: \'Roboto-MediumItalic.ttf\'\n },\n arial: {\n normal: \'arial.ttf\',\n bold: \'arial.ttf\',\n italics: \'arial.ttf\',\n bolditalics: \'arial.ttf\'\n }\n };\n // modify the PDF to use a different default font:\n doc.defaultStyle.font = "arial";\n var i = 1;\n }\n\n</script>\n\n</body>\n数据表作为网页
\n上述 HTML 生成以下网页：
\n
PDF 文件
\n当您点击“另存为 PDF”按钮时，PDF 文档如下所示：
\n
如何实施
\n正如这里所解释的，pdfMake 默认使用 Roboto 字体。此字体不支持波斯字符/脚本。为了解决这个问题，我将默认字体更改为 Arial，它确实提供了对波斯字符/脚本的支持。
\n请参阅末尾有关使用 Arial 的附加说明 - 另一种字体可能更适合避免许可问题。
\n为了进行此更改，我采取了以下步骤：
\n我生成了一个新vfs_fonts.js文件，其中包含 arial TTF 文件的内容。我还引用了这个新的本地vfs_fonts.js文件，而不是 Cloudflare 版本。
该vfs_fonts.js文件具有以下结构：
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {\n "arial.ttf": "AAEAA...MYXRu",\n "another_one.ttf": "XXXX...XXXX"\n};\n每个"AAEAA...MYXRu字符串都是相关字体文件的 Base64 编码表示形式。
要生成 TTF 文件的字符串，您可以使用 pdfmake 提供的实用程序（见下文），也可以使用任何 Base64 编码器。dataurlmaker就是一个例子。
\n将 dataurlmaker 生成的（很长）字符串粘贴到您的vfs_fonts.js文件中。请勿包含 dataurlmaker 提供的任何序言（“data:application/octet-stream;base64,”）。仅包含 base64 字符串本身。
或者...
\n使用pdfmake提供的工具：
\n为了生成这个新文件，我按照此页面vfs_fonts.js上的相关说明进行操作。
(a) 我已经安装了 npm。
\n(b) 我跑了npm install pdfmake
(c)我更改为pdfmake安装目录：
\nC:\\Users\\<myUserID>\\node_modules\\pdfmake\\\n(d) 我examples/fonts在我的pdfMake目录中创建了子目录。
(e) 我将 Windowsarial.ttf文件复制到这个新fonts目录中。
(f) 我运行npm install（从 pdfMake 目录）以确保安装了所有必备模块。
(g) 我使用以下命令安装了 gulpnpm install gulp --global
(h) 我跑去gulp buildFonts创建一个新的build/vfs_fonts.js.
(i) 我将这个新build/vfs_fonts.js文件包含在我的网页代码中（如上所示）。
完成这些步骤后，我能够使用 Arial 字体生成 PDF。
\n\n
更新
\n请阅读@anotherfred 提供的评论以获取一些重要说明：
\n关于Arial的具体使用（重点是我的）：
\n\n\n请注意，Arial 的许可证可能禁止这样做。像 Noto Sans 这样的字体是免费的国际字体，但您必须仔细选择版本才能获得您想要的语言。
\n
您可以使用Google Fonts和Font Squirrel等在线工具来查找符合您的语言和字符/字形要求的字体。
\n关于如何引用您选择的字体文件：
\n\n\n另外，为了避免在数据表选项中设置默认字体，您只需在
\npdfMake.fontsRoboto 中命名您的密钥（无论您实际在其中使用什么 ttf 文件），它将自动使用。
如果以下内容可以在 DataTables 的未来版本中开箱即用，那就太好了（带有 pdfmake 的升级版本）
\n\n\n您还可以使用字体 url 代替 vfs_fonts，但这需要比数据表建议更新版本的 pdfMake。
\n
| 归档时间： |
|
| 查看次数： |
4262 次 |
| 最近记录： |