JSPDF自定义字体添加不起作用答案

【问题标题】：JSPDF Custom Font Add not workingJSPDF自定义字体添加不起作用
【发布时间】：2017-04-24 14:25:29
【问题描述】：

CSS 代码

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

JS 代码

doc.setFont('Calibri');
doc.setFontSize(7.5);
doc.setFontType("normal");
doc.text(10, 10, "Hi, How r u");

我想添加 Calibri 字体，但它不起作用

包含的js脚本列表

<script src="/assets/global/scripts/jspdf/jspdf.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/acroform.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/from_html.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addhtml.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/annotations.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/autoprint.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/canvas.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/cell.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/context2d.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/javascript.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/outline.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/prevent_scale_to_fit.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/split_text_to_size.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/standard_fonts_metrics.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/svg.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/total_pages.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/zlib.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png.js" type="text/javascript"></script> 
<script src="/assets/global/scripts/jspdf/plugins/addimage.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/png_support.js" type="text/javascript"></script>
<script src="/assets/global/scripts/jspdf/plugins/filesaver.js" type="text/javascript"></script>

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 23, 2017, 12:57:52 PM
    Author     : common
*/

@font-face {
    font-family: Calibri;
    src: url("fonts/calibri.ttf");
    font-style: normal;
}

/*
@font-face {
    font-family: Calibri;
    src: url("fonts/calibrii.ttf");
    font-style: italic;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibrib.ttf");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: Calibri;
    src: url("fonts/calibriz.ttf");
    font-style: italic;
    font-weight: bold;
}*/

【问题讨论】：

你可以试试doc.addFont('Calibri', 'Calibri', 'Regular');。这些是我在 Fontographer 中打开 Calibri 字体时看到的名称。
检查您是否获得了使用自定义字体的正确许可。我相信 Calibri 是一种版权资源。

标签： javascript jspdf

【解决方案1】：

对于 jsPdf 版本 1.4.0 及更高版本，可以使用自定义字体 (ttf)。自定义字体应采用 base64 编码。不幸的是，并非所有字体都有效。

var doc = new jsPDF('landscape');

// to generate 'yourCustomFontTtfBase64Encoded' you can use 
// jsPDF-CustomFonts-support library (on their
// github page there are all instructions for that)
doc.addFileToVFS('yourCustomFont.ttf', 'yourCustomFontTtfBase64Encoded');

doc.addFont('yourCustomFont.ttf', 'yourCustomFont', 'normal');

doc.setFont('yourCustomFont');

用于生成 'yourCustomFontTtfBase64Encoded' 的 jsPDF-CustomFonts-support 库在这里：https://github.com/sphilee/jsPDF-CustomFonts-support

【讨论】：

找不到添加文件到 VFS 的方法 :-(
@Sebastian Paduano，似乎他们的 index.d.ts 没有 addFileToVFS 方法。作为一种解决方法，您可以像这样在您的应用程序中扩展他们的 jsPDF 类：class MyJsPDF extends jsPDF { addFileToVFS(filename: string, filecontent: any): void {}; } 然后：const doc = new MyJsPDF('landscape');
这适用于 React，任何人都想知道

【解决方案2】：

这是我正在使用的解决方案。效果很好（请参阅下面的工作代码笔）...

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

jsPDF:https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-支持：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() 方法中，三个参数是：

您在addFileToVFS() 文件中的addFileToVFS() 函数中使用的字体名称
您在 JavaScript 的 setFont() 函数中使用的字体名称
您在 JavaScript 的 setFontType() 函数中使用的字体样式

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

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

【讨论】：

【解决方案3】：

您好，您可以尝试修改这样的字体，

API.addFont = function(fontScript, font, style) {
      addFont(fontScript, font, style, 'StandardEncoding');
    };

你必须在调用字体更改之前添加到 lib/ 上面的函数，但我建议在加载 jspdf 之后添加脚本标签，并在该脚本标签中添加这个函数。

现在你需要添加字体css，

然后你可以像这样修改pdf的字体。

doc.addFont('fonts/calibri.ttf', 'Calibri', 'normal');
doc.setFont('Calibri');
doc.text(50,50,'Now this is Calibri');

【讨论】：

你能提供小提琴吗？
我从未尝试过 jsfiddle。如果您曾经使用 jspdf 并添加自定义字体，请提供有关 stackoverflow 或任何其他来源的代码。
@Hardeep - 这是一个带有工作示例的代码笔：codepen.io/stuehler/pen/pZMdKo。
@Hardeep - 有关此问题的更多详细信息，请参阅我之前发布的完整答案。

【解决方案4】：

你现在不能。

如果您查看source code，您会看到有一个开关，如果它不知道字体，则返回times 作为字体

switch (fontName) {
      case 'sans-serif':
      case 'verdana':
      case 'arial':
      case 'helvetica':
        fontName = 'helvetica';
        break;
      case 'fixed':
      case 'monospace':
      case 'terminal':
      case 'courier':
        fontName = 'courier';
        break;
      case 'serif':
      case 'cursive':
      case 'fantasy':
      default:
        fontName = 'times';
        break;
    }

您可以使用其中一种字体，也可以编辑库以支持您的字体。

否则，有一个正在开发的库添加对自定义字体的支持：https://github.com/sphilee/jsPDF-CustomFonts-support

添加所有需要的文件后，你应该像这样使用它：

doc.addFont('fonts/calibri.ttf', 'Calibri', 'Calibri-normal', 'normal');

【讨论】：

我急需使用自定义字体。有什么办法吗？请给我建议
@HardeepSingh 我用可能的解决方案编辑了答案
还是不行。如果你是完整的例子，那么请在答案中写完整的代码
@HardeepSingh 请使用您目前尝试过的代码更新问题。
不可能编写完整的代码。因为我正在从事正在进行的项目。项目规模很大。事物是相互关联的，因此您研究整个代码会感到困惑。

【解决方案5】：

如上所述，您可以在https://github.com/sphilee/jsPDF-CustomFonts-support 使用 jsPDF-CustomFonts-support 库。

READ.ME 文件中有说明，但让我前进的是这些说明https://github.com/sphilee/jsPDF-CustomFonts-support/issues/16#issuecomment-307174041：

将您的 .ttf 字体上传到 Font Squirell https://www.fontsquirrel.com/tools/webfont-generator

按下载，您将获得一个带有新 .ttf 文件的压缩文件。现在您必须编码为 base64 https://www.giftofspeed.com/base64-encoder/。

获得字体的 base64 代码后，您必须转到使用 jsPDF-CustomFonts-support https://github.com/sphilee/jsPDF-CustomFonts-support 下载的 vfs_fonts.js 文件，并在 ', 之一之后' 用于分隔该文件中的不同字体，您必须添加：“YOUR_FONT_NAME.ttf”：“YOUR BASE64 CODE”，（请记住在引号后以逗号结尾）。

完成后，您可以添加函数文档。 addFont("YOUR_FONT_NAME.ttf","YOUR_FONT_NAME.ttf","normal","WinAnsiEncoding")。

【讨论】：