jsPDF中的自定义字体?

问题描述 投票:15回答:3

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

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

Courier,Helvetica,Times,courier,helvetica,次

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

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

jspdf
3个回答
23
投票

我发现这可以通过修改jsPDF.js来暴露公共API中现有的addFont方法。

jsPDF.js,寻找:

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

添加以下内容:

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

为了清楚起见,我把这种方法放在其他字体方法附近 - API.setFontAPI.setFontSizeAPI.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.

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

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


2
投票

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

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

点击“创建”。

enter image description here

该页面将提供要保存的“下载”。这将生成一个名为[类似] .jsRopaSans-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');
© www.soinside.com 2019 - 2024. All rights reserved.