个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 10:28:07 26 4
gpt4 key购买 nike

我已经用谷歌搜索了整整一天，并搜索了 StackOverflow 以找到一种解决方案来更改数据表的 pdf 导出中的字体。但是，我没有遇到解决方案。当我将表格导出为 pdf 脚本时，字体是无法解读的。看看下面的图片。它显示了我表中的两列。

PDF export of datatables font problem

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'
        }
};
}


以下也是我的数据表的按钮 block : 

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

                },
 ]


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

最佳答案

这是一个解决方案。
数据表代码
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 生成以下网页:
enter image description here
PDF 文件
当您单击“另存为 PDF”按钮时，PDF 文档如下所示:
enter image description here
如何实现
如解释 here , pdfMake 默认使用 Roboto 字体。此字体不支持波斯字符/脚本。为了解决这个问题，我将默认字体更改为 Arial，它确实支持波斯字符/脚本。
请参阅最后关于使用 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 中的每一个strings 是相关字体文件的 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) 我创建了 examples/fonts我的 pdfMake 中的子目录目录。
(e) 我复制了我的 Windows arial.ttf文件到这个新的 fonts目录。
(f) 我跑了 npm install (来自 pdfMake 目录)以确保安装了所有必备模块。
(g) 我使用 npm install gulp --global 安装了 gulp
(h) 我跑了 gulp buildFonts创建一个新的 build/vfs_fonts.js .
(i) 我包含了这个新的 build/vfs_fonts.js我的网页代码中的文件(如上所示)。
采取这些步骤后，我能够使用 Arial 字体生成 PDF。

更新
请阅读 comments provided by @anotherfred对于一些重要说明:
关于 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等在线工具和 Font Squirrel查找符合您的语言和字符/字形要求的字体。
关于如何引用您选择的字体文件:

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.


如果以下内容可以在 future 版本的 DataTables 中开箱即用(使用升级版的 pdfmake)，那就太好了

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

关于pdf - 更改数据表 pdfmaker 扩展中的字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60548170/

26 4 0
文章推荐： azure - App Insights 中的 client_Browser 字段始终为空
文章推荐： r - 循环遍历列并返回值
文章推荐： ruby-on-rails - 简化 Ruby on Rails 中的赋值
文章推荐： azure - 如何访问 Azure API 管理中的路由参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com