jsPDF中的自定义字体？

Question

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

使用基本库，如果我控制日志'doc.getFontList（）'，我得到：

Courier，Helvetica，Times，courier，helvetica，次

但是，说我想使用'Comic Sans'（不是我想; o））可以做到吗？

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

Answer 1

我发现这可以通过修改jsPDF.js来暴露公共API中现有的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

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

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

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字体。所以，我的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()方法中，这三个参数是：

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

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

希望这对你来说和我一样好。

Answer 3

最新版本的jsPDF (1.5.3)似乎更容易：

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

点击“创建”。

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

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