jsPDF-以React.js/ES6样式导入字体 [英] jsPDF - Importing fonts in React.js / ES6 style

问题描述

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

I am trying to add a font in jsPDF in my React project. I converted the font to base64 and to a .js script using the provided generator at: https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html

我将字体脚本导入为:

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

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

where Muli-normal is the converted Muli-normal.js file from Muli.ttf using the generator. I set the font with

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);

推荐答案

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

As the script does not recognize the jsPDF, one needs to import it using

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模块?).我想着要解决这个问题并回答我的问题，但是欢迎对此做任何解释.

I still can't exactly figure out how the Muli-normal.js script is structured. (an IIFE module?). I figured to work it and answering my question but any explanations on this is welcome.

希望这对某人有帮助

这篇关于jsPDF-以React.js/ES6样式导入字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！