Question

我的项目：Angular 7

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

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

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

Answer 2

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

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

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

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

我希望能解决您的问题！

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

2 个答案: