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

Posted 2023-03-29

【中文标题】如何在带有 UTF-8 的 jsPDF 中使用“setFont”？

【英文标题】：How to use "setFont" in jsPDF with UTF-8?

【发布时间】：2019-07-04 18:30:15

【问题描述】：

我的项目：Angular 7

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

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

【参考方案1】：

这很简单：

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

     import jsPDF from 'jspdf';

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

从该网站添加您生成的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());
    

使用您导入的字体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');
    

【参考方案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

希望能解决你的问题！

【讨论】：

我的字体js文件添加到项目后，jsPDF如何识别？我假设我需要使用 addFont() 但无法真正弄清楚，因为 addFont() 接收 postScriptName、id、fontStyle、编码作为参数，但我不知道在哪里可以找到它们

@DuongNguyen 添加 js 脚本后，您可以调用 jsPDF.setFont('MyFont') 函数将文本设置为您的自定义字体。 raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#setFont