如何在带有 UTF-8 的 jsPDF 中使用“setFont”？

Question

我的项目：Angular 7

我想在生成 PDF 的服务中添加自定义字体 (UTF-8)。我使用 jsPDF。我找到了很多例子，但都对我不起作用。在 GitHub jsPDF 文档上说（使用 UTF-8 / TTF 章节）： https://github.com/MrRio/jsPDF

这意味着我可以做到。所以我生成了这个文件（字体 Roboto-regular.tff）。但是我应该在哪里粘贴这个文件以及如何使用它？

Answer 1

这很简单：

1. 创建一个函数somePDFCreator 并检查您的可用字体console.log()：

     import jsPDF from 'jspdf';

     function somePDFCreator() {
          const doc = new jsPDF();
          console.log(doc.getFontList());
        }

1. 从该网站添加您生成的font Roboto-regular.tff：https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html 并将 IIFE js 代码插入somePDFCreator。检查日志，一定有你的字体。

    import jsPDF from 'jspdf';   

    function somePDFCreator() {
       (function (jsPDFAPI) { var font = 'AAEAAAAQAQAABAAAR......';
       var callAddFont = function () {
         this.addFileToVFS('Roboto-regular.tff', font);
         this.addFont('Roboto-regular.tff', 'Roboto-Regular', 'normal');
       };
       jsPDFAPI.events.push(['addFonts', callAddFont])
       })(jsPDF.API);


       const doc = new jsPDF();
       console.log(doc.getFontList());
    }

1. 使用您导入的字体doc.setFont('Roboto-Regular', 'normal');：

    import jsPDF from 'jspdf';   

    function somePDFCreator() {
       (function (jsPDFAPI) { var font = 'AAEAAAAQAQAABAAAR......';
       var callAddFont = function () {
         this.addFileToVFS('Roboto-regular.tff', font);
         this.addFont('Roboto-regular.tff', 'Roboto-Regular', 'normal');
       };
       jsPDFAPI.events.push(['addFonts', callAddFont])
       })(jsPDF.API);


       const doc = new jsPDF();
       console.log(doc.getFontList());

       doc.setFont('Roboto-Regular', 'normal');
       doc.setFontSize(8);

       doc.text("Example text Lorem ipsum", 40, 25);
       return doc.save('myPdfFileName.pdf');
    }

Answer 2

如果您仔细查看文档，它会要求您处理 ttf 文件并将生成的 js 文件与应用程序代码一起使用。

PDF 中的 14 种标准字体仅限于 ASCII 代码页。如果你想使用 UTF-8，你必须集成一个自定义字体，它提供了所需的字形。 jsPDF 支持 .ttf 文件。因此，如果您想在 pdf 中包含例如中文文本，您的字体必须具有必要的中文字形。因此，请检查您的字体是否支持所需的字形，否则它将显示空白而不是文本。

要将字体添加到 jsPDF，请使用 /fontconverter/fontconverter.html 中的 fontconverter。 fontconverter 将创建一个 js 文件，其中提供的 ttf 文件的内容为 base64 编码字符串和 jsPDF 的附加代码。您只需将此生成的 js 文件添加到您的项目中。然后，您就可以在代码中使用 setFont-method 并编写 UTF-8 编码文本了。

参考：https://github.com/MrRio/jsPDF#use-of-utf-8--ttf

希望能解决你的问题！