更改数据表 pdfmaker 扩展中的字体

Question

我已经google了整整一天，并搜索了Whosebug以找到更改dataTables pdf导出中字体的解决方案。但是，我没有运行解决方案。当我将 table 导出到 pdf 脚本字体时，字体是无法辨认的。看看下面的图片。它显示了我的 table.

中的两列

dataTables 论坛和 pdfMaker 文档都含糊不清。谁能帮我解决这个问题。我需要为 datatables 的 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'
        }
};
}

以下也是我的数据按钮块tables:

buttons: [
                { extend: 'pdfHtml5', exportOptions:
                        { columns: [0, 1, 2, 3, 4, 5, 6] },
                    customize: function (doc) {
                    doc.defaultStyle.font = Vazir},

                },
 ]

请注意，在上面的代码块中，当我添加 'customize' 块时，pdfMaker 按钮不会准备任何 pdf 报告；没有它，它可以工作，但是，字体无法辨认。提前致谢。

Answer 1

这是一个解决方案。

数据表代码

HTML如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Export to PDF</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- buttons -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  
  <!--
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

  Build a custom local version of the vfs_fonts.js file, containing whatever fonts you need. The 
  structure of the file is this:
  
  this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
    "arial.ttf": "AAEAA...MYXRu",
    "another_one.ttf": "XXXX...XXXX"
  };

  Replace the "AAEAA...MYXRu" with the base64-encoded string of your font file.
  You can use this site to generate the string: https://dataurl.sveinbjorn.org/#dataurlmaker

  -->
  <script src="vfs_fonts.js"></script>
  

  <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

</head>

<body>

<div style="margin: 20px;">

<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Adélaïde Nixon</td>
                <td><font face="verdana">الفبای فارسی ۱۲۳۴</font></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Data</th>
            </tr>
        </tfoot>
    </table>

</div>

<script type="text/javascript">

  $(document).ready(function() {
    $('#example').DataTable({

      dom: 'Bfrtip',
      buttons: [{
        extend: 'pdf',
        customize: function ( doc ) {
          processDoc(doc);
        }
      }]
    });
  });

  function processDoc(doc) {
    //
    // https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
    //
    // Update pdfmake's global font list, using the fonts available in
    // the customized vfs_fonts.js file (do NOT remove the Roboto default):
    pdfMake.fonts = {
      Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-MediumItalic.ttf'
      },
      arial: {
        normal: 'arial.ttf',
        bold: 'arial.ttf',
        italics: 'arial.ttf',
        bolditalics: 'arial.ttf'
      }
    };
    // modify the PDF to use a different default font:
    doc.defaultStyle.font = "arial";
    var i = 1;
  }

</script>

</body>

作为网页的 DataTable

上面的 HTML 生成以下网页：

PDF 文件

单击“另存为 PDF”按钮后，PDF 文档如下所示：

如何实施

如 here 所述，pdfMake 默认使用 Roboto 字体。此字体不支持波斯语 characters/script。为了解决这个问题，我将默认字体更改为 Arial，它确实支持波斯语 characters/script.

请参阅末尾关于使用 Arial 的附加说明 - 另一种字体可能更合适以避免许可问题。

为了进行此更改，我采取了以下步骤：

我生成了一个新的 vfs_fonts.js 文件，其中包含一个 arial TTF 文件的内容。我还参考了这个新的本地 vfs_fonts.js 文件，而不是 Cloudflare 版本。

vfs_fonts.js 文件具有以下结构：

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
  "arial.ttf": "AAEAA...MYXRu",
  "another_one.ttf": "XXXX...XXXX"
};

每个 "AAEAA...MYXRu 字符串都是相关字体文件的 base64 编码表示。

要为您的 TTF 文件生成字符串，您可以使用 pdfmake 提供的实用程序（见下文），或者您可以使用任何 base64 编码器。一个例子是 dataurlmaker.

将 dataurlmaker 生成的（很长的）字符串粘贴到您的 vfs_fonts.js 文件中。不要包含 dataurlmaker 提供的任何前导码（“data:application/octet-stream;base64,”）。仅包括 base64 字符串本身。

或者...

使用pdfmake提供的工具：

为了生成这个新的 vfs_fonts.js 文件，我遵循了 this page 上的相关说明。

(a) 我已经安装了 npm。

(b) 我运行 npm install pdfmake

(c)我换成了pdfmake安装目录：

C:\Users\<myUserID>\node_modules\pdfmake\

(d) 我在 pdfMake 目录中创建了 examples/fonts 子目录。

(e) 我将 Windows arial.ttf 文件复制到这个新的 fonts 目录中。

(f) I 运行 npm install（来自 pdfMake 目录）以确保安装了所有先决条件模块。

(g) 我使用 npm install gulp --global

安装了 gulp

(h) 我运行 gulp buildFonts 创建一个新的 build/vfs_fonts.js.

(i) 我在我的网页代码中包含了这个新的 build/vfs_fonts.js 文件（如上所示）。

执行这些步骤后，我能够使用 Arial 字体生成 PDF。

更新

请阅读了解一些重要说明：

关于Arial的具体使用（重点是我的）：

Note that Arial's licence may forbid this. Fonts like Noto Sans are free international fonts but you have to carefully choose the version to get the languages you want.

您可以使用 Google Fonts and Font Squirrel 等在线工具来查找符合您的语言和 character/glyph 要求的字体。

关于如何引用您选择的字体文件：

Also, to avoid having to set the default font in datatables options, you can just name your key in pdfMake.fonts Roboto (whatever ttf files you actually use in it) and it will be used automatically.

如果以下内容可以在未来版本的 DataTables（使用升级版 pdfmake）中开箱即用，那就太好了

You can also use a font url instead of vfs_fonts, but this requires a newer version of pdfMake than datatables suggest.

更改数据表 pdfmaker 扩展中的字体

Changing font in datatables pdfmaker extension

pdf

fonts

datatables

数据表代码

作为网页的 DataTable

PDF 文件

如何实施