在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结果的字体仍然是默认字体（不是漫画字体），而且没有错误。请帮忙……

- esthrim

---

您可以尝试查看此处提供的详细问题和答案：https://dev59.com/urb3oIgBc1ULPQZF54Tk。 - Flippowitsch

Answer 1

我找到了这个github链接

1：在https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L390和函数名称 demoUsingTTFFont() 对我很有用，转换成 base64 编码器请参考此链接

- Nikse

---

这需要经过几次试错才能实现，我正在使用Vue.JS和JsPDF 1.5.3。 - morph85

对我也起作用了！实际上之前我尝试了几乎相同的方法，但不知道为什么它没起作用。我使用了MacOS终端的base64编码器...也许那个东西有问题，我不知道。但这个方法有效！谢谢。 - user18472307

Answer 2

因为这里其他的答案有点过时，所以这是我正在使用的解决方案...

首先，正如其他人提到的那样，你需要这两个库：

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

接下来 - 第二个库需要您提供至少一个自定义字体，文件名为default_vfs.js。我正在使用两种自定义字体 - Arimo-Regular.ttf和Arimo-Bold.ttf - 都来自Google Fonts。因此，我的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()方法中，三个参数是：

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

您可以在这里查看它的工作方式：https://codepen.io/stuehler/pen/pZMdKo 希望对您有用。

- mattstuehler

Answer 3

我找到了解决方案，

不要使用jspdf.js，而是使用debug.jspdf.js。

然后在debug.jspdf.js中添加以下代码：

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

- esthrim

Answer 4

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

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

    https://dev59.com/cV8d5IYBdhLWcg3wXRMX#26981550

- yeppe

---

我已经参考了你在“这里”提到的链接。我已经尝试过了，但仍然无法正常工作。 - esthrim

在最新的来自Github的jspdf.js中，它已经包含了那些代码。(API.addFont....) - esthrim