jsPDF中的自定义字体？

Question

是否可以在jsPDF中包含自定义字体？

使用基本库,如果我控制日志'doc.getFontList()',我得到:

Courier,Helvetica,Times,courier,helvetica,次

但是,说我想使用'Comic Sans'(不是我想; o))可以做到吗？

更好的是,我可以使用本地存储的字体,并已使用@ font-face在网站中声明？

Answer 1

我发现通过修改公开API中jsPDF.js的现有addFont方法可以实现这一点.

在jsPDF.js,寻找:

//---------------------------------------
// Public API

添加以下内容:

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

我把这个方法附近其他字体方法清晰- ,API.setFont,API.setFontSize,API.setFontType等.

现在在您的代码中,使用:

doc.addFont('ComicSansMS', 'Comic Sans', 'normal');
doc.setFont('Comic Sans');
doc.text(50,50,'Hello World');

这对我来说在加载jsPDF之前使用css包含的@ font-face字体以及系统字体.使用jsPDF的插件框架可能有更好的方法来做到这一点,但这个快速而肮脏的解决方案至少应该让你前进.

请注意,doc.getFontList()将不显示的字体:

// TODO: iterate over fonts array or return copy of fontmap instead in case more are ever added.

Answer 2

使用最新版本的jsPDF（1.5.3）似乎容易得多：

如果您在文件夹jsPDF-master>中查找fontconverter，则有一个文件fontconverter.html。在浏览器中打开，然后使用Browse...按钮导航到并选择.ttf字体文件。

点击“创建”。

该页面将提供要保存的“下载”。这将产生一个.js名为[something like] 的文件RopaSans-Regular-normal.js。这需要包含在产生PDF的页面中。就个人而言，我已经在主页标题中完成了此操作（请注意的顺序script）：

<!-- pdf creation -->
<script src="FileSaver.js-master/src/FileSaver.js"></script>
<script src="jsPDF-master/dist/jspdf.debug.js"></script>

<!-- custom font definition -->
<script src="path-to-the-file-just-saved/RopaSans-Regular-normal.js" type="module"></script>

现在，在您的js PDF生成方法中：

doc.setFont('RopaSans-Regular');
doc.setFontType('normal');

Answer 3

这是我正在使用的解决方案...

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

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

接下来 - 第二个库要求您在名为default_vfs.js. 我正在使用两种自定义字体 - Arimo-Regular.ttf 和 A​​rimo-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 字符串，您可以将其粘贴到 .ttf 文件中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. 您addFileToVFS()在default_vfs.js文件中的函数中使用的字体名称
2. 您setFont()在 JavaScript 函数中使用的字体名称
3. 您setFontType()在 JavaScript中的函数中使用的字体样式

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

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

Answer 4

查看 fontconverter.html 后，发现它只不过将 TTF 文件打包到 JS 文件内的 base64 字符串中，我想出了在创建文档之前调用的以下方法。它基本上执行由 fontconverter.html 生成的各个文件执行的操作，只是按需执行：

async function loadFont(src, name, style, weight) {
    const fontBytes = await fetch(src).then(res => res.arrayBuffer());
    
    var filename = src.split('\\').pop().split('/').pop();
    var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(fontBytes)));

    var callAddFont = function () {
        this.addFileToVFS(filename, base64String);
        this.addFont(filename, name, style, weight );
        };
    jsPDF.API.events.push(['addFonts', callAddFont]);
}

像这样称呼它：

await loadFont("/css/fonts/exo-2-v9-latin-ext_latin-italic.ttf", "Exo-2", "italic", 400);
await loadFont("/css/fonts/exo-2-v9-latin-ext_latin-regular.ttf", "Exo-2", "normal", 400);
await loadFont("/css/fonts/exo-2-v9-latin-ext_latin-500.ttf", "Exo-2", "normal", 500);
await loadFont("/css/fonts/exo-2-v9-latin-ext_latin-500italic.ttf", "Exo-2", "italic", 500);

它从 URL 加载字体，并将其添加到 VFS 和字体管理器。重要提示：字体名称不能包含空格。您不会收到任何警告，但生成的 PDF 要么无法打开，要么文本看起来很奇怪。