Reactjs 如何使用vfs_fonts.js减少bundle.js文件大小?
我正在用react/typescript开发pdf下载功能。 (使用pdfmake) 我的bundle.js文件太大。(超过8MB) 所以,我想减少这个 主要原因是bundle.js包含vfs_fonts.js。 此文件大小超过17MB 参考本页,我尝试动态获取字体文件,而不是绑定该文件 但它不起作用 这是我代码的一部分Reactjs 如何使用vfs_fonts.js减少bundle.js文件大小?,reactjs,fonts,pdfmake,Reactjs,Fonts,Pdfmake,我正在用react/typescript开发pdf下载功能。 (使用pdfmake) 我的bundle.js文件太大。(超过8MB) 所以,我想减少这个 主要原因是bundle.js包含vfs_fonts.js。 此文件大小超过17MB 参考本页,我尝试动态获取字体文件,而不是绑定该文件 但它不起作用 这是我代码的一部分 import * as pdfMake from 'pdfmake/build/pdfmake'; function fetchFont (fontURL: string)
import * as pdfMake from 'pdfmake/build/pdfmake';
function fetchFont (fontURL: string) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('GET', fontURL, true);
request.responseType = 'arraybuffer';
request.onload = function (e: any) {
resolve(request.response);
};
request.onerror = reject;
request.send();
});
}
interface Dictionary {
[index: string]: string;
}
class PdfFontLoader {
fontDefs: Dictionary[];
vfs: {};
loaded: boolean;
constructor () {
this.fontDefs = [];
this.vfs = {};
}
addFont (fontDef: Dictionary) {
this.fontDefs.push(fontDef);
}
load() {
return new Promise((resolve, reject) => {
if (this.loaded) {
resolve();
} else {
const fetches = this.fontDefs.map(fontDef => {
return fetchFont(fontDef.URL).then((data) => {
console.log('fetched ' + JSON.stringify(data));
this.vfs[fontDef.name] = data;
}).catch(e => {
console.log('error ' + e);
});
});
Promise.all(fetches).then(() => {
this.loaded = true;
resolve();
}).catch(reject);
}
});
}
}
const pdf = pdfMake;
pdf.vfs = fontLoader.vfs;
fontLoader.addFont({URL: 'GenShinGothic-Normal.ttf', name: 'GenShinGothic-Normal.ttf'});
fontLoader.addFont({URL: 'GenShinGothic-Bold.ttf', name: 'GenShinGothic-Bold.ttf'});
fontLoader.load().then(res => {
console.log('load finished');
pdf.fonts = {
GenShinGothic: {
normal: 'GenShinGothic-Normal.ttf',
bold: 'GenShinGothic-Bold.ttf'
}
};
console.log("vfs is " + JSON.stringify(pdf.vfs));
console.log
load finished
fetched {}
vfs is {"GenShinGothic-Normal.ttf":{},"GenShinGothic-Bold.ttf":{}}
如果生成pdf
Error: unknown font format
你能帮我吗
==其他信息=====
字体文件(ttf)与bundle.js部署在同一目录中