在jspdf中添加自定义字体

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 结果的字体仍然是默认字体（不是 comic sans）。并且没有错误。请帮忙...

Answer 1

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

 **************
    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');

Answer 2

我找到了解决方案，

不要使用jspdf.js，而是使用调试。jspdf.js

然后在调试中添加此代码。jspdf.js

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

Answer 3

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

首先，正如其他人所提到的——您需要这两个库：

jsPDF: https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-支持：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 文件，它会给你 Base64 字符串，你可以将其粘贴到 default_vfs.js。

你可以在这里看到实际文件的样子，我的字体：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() 方法中，三个参数是：

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

setFont()

您在 JavaScript

setFontType()

你可以在这里看到这个工作：https://codepen.io/stuehler/pen/pZMdKo

希望这对你和我一样有效。

Answer 4

我找到了这个github link

1: https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L390 and function name demoUsingTTFFont() useful for me.and to convert into base64 encoder link

在jspdf中添加自定义字体

Add Custom font in jspdf

javascript

fonts

jspdf