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

Question

我的项目：Angular 7

我想将自定义字体 (UTF-8) 添加到生成 PDF 的服务中。我用的是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());
        }

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

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