jsPDF

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

希望这对某人有所帮助

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

jsPDF - Importing fonts in React.js / ES6 style

fonts

reactjs