Question

我想在jsPDF中使用自定义字体，例如'Comic Sans MS'或'Calibri'字体。我发现了类似的问题here，但我的工作没有用。我已经添加了最新的jspdf。我的代码如下：

        var doc = new jsPDF('p','mm','a4');

        doc.addFont('ComicSansMS', 'Comic Sans', 'normal','StandardEncoding');
        doc.setFont('Comic Sans');          
        doc.text(10, 10, "Lorem ipsum dolor sit amet!");
        doc.output('dataurl');

但pdf结果的字体仍然是默认字体（不是漫画sans）。而且没有错误。请帮忙......

Answer 1

我找到了解决方案，

请勿使用jspdf.js，但请使用debug.jspdf.js

然后在debug.jspdf.js中添加此代码

   API.addFont = function(postScriptName, fontName, fontStyle) {
       addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
   };

Answer 2

由于这里的其他答案有些过时，因此这是我正在使用的解决方案...

首先，正如其他人提到的那样-您需要以下两个库：

jsPDF：https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-support：https://github.com/sphilee/jsPDF-CustomFonts-support

下一步-第二个库需要，您必须在名为default_vfs.js的文件中为其提供至少一种自定义字体。我正在使用两种自定义字体-Arimo-Regular.ttf和Arimo-Bold.ttf-都来自Google字体。因此，我的default_vfs.js文件如下所示：

（

(function (jsPDFAPI) { 
    "use strict";
    jsPDFAPI.addFileToVFS('Arimo-Regular.ttf','[Base64-encoded string of your font]');
    jsPDFAPI.addFileToVFS('Arimo-Bold.ttf','[Base64-encoded string of your font]');
})(jsPDF.API);

很明显，您使用的字体会有所不同，具体取决于您使用的字体。

有很多方法可以获取字体的Base64编码的字符串，但是我使用了这种方法：https://www.giftofspeed.com/base64-encoder/。

它使您可以上传.ttf字体文件，并为您提供可粘贴到default_vfs.js中的Base64字符串。

您可以在这里使用https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js

查看带有我的字体的实际文件的外观。

因此，一旦将字体存储在该文件中，您的HTML应该如下所示：

    <script src="js/jspdf.min.js"></script>
    <script src="js/jspdf.customfonts.min.js"></script>
    <script src="js/default_vfs.js"></script>

最后，您的JavaScript代码如下所示：

const doc = new jsPDF({
      unit: 'pt',
      orientation: 'p',
      lineHeight: 1.2
    });

doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");

doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);

doc.text("Hello, World!", 100, 100);

doc.setFontType("bold");

doc.text("Hello, BOLD World!", 100, 150);

doc.save("customFonts.pdf");

这对于大多数人来说可能是显而易见的，但是在该addFont()方法中，三个参数是：

您在addFileToVFS()文件的default_vfs.js函数中使用的字体名称
您在JavaScript的setFont()函数中使用的字体名称
您在JavaScript中的setFontType()函数中使用的字体样式

您可以在这里看到此方法：https://codepen.io/stuehler/pen/pZMdKo

希望这对您和我都一样。

Answer 3

类似的问题看起来你错过了这个

 **************
    API.addFont = function(postScriptName, fontName, fontStyle) {
          addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
        };
    ****************
        doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
        doc.setFont('Comic Sans');
        doc.text(50,50,'Hello World');

    http://stackoverflow.com/a/26981550/5086633

Answer 4

我找到了这个github link

1：https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L390和函数名称demoUsingTTFFont（）对我有用，并可转换为base64编码器link

在jspdf中添加自定义字体

4 个答案: