SpreadJS导出PDF使用备选字体
本帖最后由 Ellia.Duan 于 2024-12-24 17:24 编辑SpreadJS支持导出PDF ,但是只内置14种标准字体。除了这些字体外,其他自定义字体需要进行注册。像我们常用的宋体,楷体等字体,如果有使用,需要注册。
关于如何注册字体,可参考这篇文章。
如果一个工作簿/ sheet 中包括很多字体,但是不想一个一个注册字体,想保留一个备选字体,该怎么办呢?
下文将详细介绍GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont的用法。
一、前端注册
现在有一个font.js长这个样子:
看上图,定义了一个fonts对象,其中“simhei.ttf”的值为一串base64格式的值。这个文件包括了"MTCORSVA.TTF“、”simkai.ttf“这两个字体库。
有了font.js的基础,我们就可以通过fonts对象获取到对应字体的值,来完成注册字体,以及备选字体。
function registerCustomFont(fontsObj) {
var fonts = {
normal: fontsObj["simkai.ttf"]
};
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('楷体', fonts);
}上述代码中,fontsObj即之前提到的fonts对象。
通过上述代码,调用registerFont完成了楷体的注册。
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
var fontInfoArray = font.split(' '), fontName = fontInfoArray;
if (fontName === 'simkai') {
returnfontsObj["simkai.ttf"]
}
return fontsObj["simsun.ttf"] //比如您的fontsObj有"simsun.ttf"属性,上面链接中下载的文件没有此ttf值
}上述代码中,通过fallbackFont 设置了备选字体,判断如果当前字体是楷体,则还是返回楷体,否则其他字体均导出为宋体。
这种用法很简单,但是font.js 这个js文件很大,如果每一个字体都要去转换base64值,那可太麻烦了。
那么,可以直接导入ttf文件吗?答案是可以的。
二、服务端注册
通过XMLHttpRequest,ajax,fetch ,还有现在框架中用的很火的axios 都可以导入一个ttf文件,然后在回调函数中,调用registerFont,fallbackFont 即可。
这里以XMLHttpRequest为例。
function registerServerFont(name, type, serverPath) {
var xhr = new XMLHttpRequest();
xhr.open('GET', serverPath, true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
// get binary data as a response
var blob = this.response;
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.onload = function (e) {
var fontrrayBuffer = reader.result;
var fonts = GC.Spread.Sheets.PDF.PDFFontsManager.getFont(name) || {};
fonts = fontrrayBuffer;
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(name, fonts);
_fonts = fontrrayBuffer
}
reader.readAsArrayBuffer(blob);
}
};
xhr.send();
}上面的代码定义了registerServerFont方法,然后进行调用registerServerFont方法进行注册。代码如下:
registerServerFont('微软雅黑', 'normal', './msyh.ttf');
调用的时候,参数为字体类型,以及本地静态ttf文件的路径。
当全部调用结束后,获取到_fonts对象
定义registerFallBackFont方法:
function registerFallBackFont() {
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
var fontInfoArray = font.split(' '), fontName = fontInfoArray;
if (fontName === 'msyh') {
return _fonts['微软雅黑'];
}
return _fonts['宋体'];
}
}在上述代码中,进行了判断。如果是微软雅黑字体,则继续用为微软雅黑,其他字体则使用宋体导出。
最后,SpreadJS固然有兜底方案,但是更推荐使用GcExcel进行PDF的导出。其中GcExcel有备选字体的相关策略,可以参考此链接:
页:
[1]