jsPDF - 以 React.js / ES6 风格导入字体答案

【问题标题】：jsPDF - Importing fonts in React.js / ES6 stylejsPDF - 以 React.js / ES6 风格导入字体
【发布时间】：2020-01-28 13:51:02
【问题描述】：

我正在尝试在我的 React 项目中的 jsPDF 中添加字体。我使用提供的生成器将字体转换为 base64 和 .js 脚本：https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html

我将字体脚本导入为：

import '../../assets/fonts/js/Muli-normal';

其中Muli-normal 是使用生成器从Muli.ttf 转换而来的Muli-normal.js 文件。我用

设置字体

doc.setFont('Muli')

但我得到了错误

  Line 10:5:  'jsPDF' is not defined  no-undef

脚本如下：

// ../../assets/fonts/js/Muli-normal.js

(function (jsPDFAPI) {
var font = 'AAEAAAASAQAABAAgRkZUTW2ZUGwAAAE..
...
...
...ASAQAAB';
var callAddFont = function () {
this.addFileToVFS('Muli-normal.ttf', font);
this.addFont('Muli-normal.ttf', 'Muli', 'normal');
};
jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API);

【问题讨论】：

...为什么需要将其转换为 base64，然后将其打包？它是一个静态资产，只需直接链接到它。请参阅Custom font faces in jsPDF? 了解如何做到这一点，而不是让您的捆绑包变得不必要地庞大，而数据一开始是静态的，并且一开始就不应该放在捆绑包中。
因为jsPDF需要base64字体？我查找了文档和 Stackoverflow 问题，其中大多数首先将字体转换为 .js 并添加到包中。我不想仅添加 .ttf 文件的副本，但这是我找到的唯一可行的解决方案。我尝试了您提供的链接中的代码，但无法使其工作。我要这样添加吗？我猜PR已经制作好了，所以我不必修改源代码。字体添加了@font-face。这不起作用：doc.addFont('Muli', 'Muli', 'normal', 'StandardEncoding'); doc.setFont('Muli');

标签： reactjs fonts jspdf

【解决方案1】：

由于脚本无法识别 jsPDF，因此需要使用导入它

import jsPDF from 'jspdf'

所以脚本变成：

// Muli-normal.js

import jsPDF from 'jspdf'

(function (jsPDFAPI) {
var font = 'AAEAAAASAQAABAAgRkZUTW2ZUGwAAAE..
...
...
...ASAQAAB';
var callAddFont = function () {
this.addFileToVFS('Muli-normal.ttf', font);
this.addFont('Muli-normal.ttf', 'Muli', 'normal');
};
jsPDFAPI.events.push(['addFonts', callAddFont])
})(jsPDF.API);

我仍然无法完全弄清楚Muli-normal.js 脚本的结构。（IIFE 模块？）。我想工作并回答我的问题，但欢迎对此进行任何解释。

希望这对某人有所帮助

【讨论】：

经过 1 小时的挫折，我已经想出了这个解决方案！然后我偶然发现了你的回答，这是我所做的典型事情。所以，是的，你是完全正确的，我已经在 jsPDF github 页面上打开了一个关于这个特定错误的问题。