reactjs - jsPDF - 导入 React.js/ES6 风格的字体

Question

我正在尝试在我的 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);

Answer 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 模块？)。我想解决它并回答我的问题，但欢迎对此进行任何解释。

希望这对某人有帮助