Ellia.Duan 发表于 2024-12-24 15:31:06

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]
查看完整版本: SpreadJS导出PDF使用备选字体