jsPDF中的自定义字体？

Question

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

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

  

Courier，Helvetica，Times，courier，helvetica，times

但是，说我想使用'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字体文件。

点击“创建”。

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

script

现在在js中使用PDF生成方法：

<!-- 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>

Answer 4

我正在使用Angular 8，Todd's answer为我工作。

一旦从fontconverter.html获取.js文件，就可以将其导入打字稿中，如下所示：

import fontref = require('path/to/font/CustomFont-normal.js')

那么，加载字体所需要做的就是像下面这样“调用” fontref：

makePdf() {
    let doc = new jsPDF();

    fontref;                             // 'run' .js to load font

    doc.getFontList();                   // contains a key-value pair for CustomFont

    doc.setFont("CustomFont");           // set font
    doc.setFontType("normal");
    doc.setFontSize(28);
    doc.text("Hello", 20, 20);

    window.open(doc.output('bloburl'));  // open pdf in new tab
  }

Answer 5

其中一些答案已经过时，因此，我链接了Rio先生本人的自述文件，其中涉及到本博文的最新版本。下面是该自述文件中段落的副本，其后是指向自述文件本身的链接。希望此其他资源对您有所帮助：

使用UTF-8 / TTF： PDF中的14种标准字体仅限于 ASCII代码页。如果您想使用UTF-8，则必须集成一个 自定义字体，它提供了所需的字形。 jsPDF支持 .ttf文件。因此，如果您想在中文中输入中文 pdf，您的字体必须具有必要的中文字形。所以检查一下 您的字体支持所需的字形，否则它将显示空白 空格而不是文字。

要将字体添加到jsPDF中，请使用我们的fontconverter /fontconverter/fontconverter.html。 fontconverter将创建一个 js文件，其中提供的ttf文件的内容以base64编码 字符串和jsPDF的附加代码。您只需要添加此 生成的js文件到您的项目。然后您就可以开始使用了 在您的代码中使用setFont方法并编写您的UTF-8编码文本。

https://github.com/MrRio/jsPDF/blob/master/README.md#use-of-utf-8--ttf

Answer 6

到目前为止，我发现的最简单的方法是使用jspdf-customfonts包。 只需通过以下方式安装软件包 npm i jspdf-customfonts 然后将以下文件添加到index.html的head标签中进行默认配置

script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> 
<script src="dist/jspdf.customfonts.min.js"></script> 
<script src="dist/default_vfs.js"></script> 

现在，您可以下载所需字体的ttf文件。然后转到this网站，选择字体并复制代码，即可完成！