在pdfmake打印中使用Glyphicons或Font-Awesome

Question

我正在使用pdfmake开发一个用于打印的webapp.在最近的几天里,我开始在我的项目中使用Glyphicons和Font-Awesome-Icons,现在我也需要打印输出中的那些.

但我无法想象实现这一目标的最佳方法是什么.

我看到两种可能性:

1. 在pdfmake中包含相应的Font,并创建类似map的地图,通过它的类名确定Icons字体表示(因为这是应用程序中使用的).在这种情况下,我仍然可以使用图标的字体颜色

2. 我可以使用像phantomJS这样的东西来生成图标的图像,但我真的不喜欢这个想法,因为我会失去轻易改变图标颜色的可能性,我将不得不以某种方式维护这个图片集.

任何想法,评论或解决方案？我真的很感激 :)

Answer 1

我解决了这个问题如下:(
我决定使用第一种方法并缩小图标以仅使用Font-Awesome)

1. 通过它的css类找到符号
   我对从https://fortawesome.github.io/Font-Awesome/cheatsheet/获取数据的想法非常不满意,所以我做了一个同事的建议:我解析了直接来自样式表的符号:

FontAwesomeMap = {
  findSymbolForClass: findSymbolForClass
};

/**
 * Looks through all Stylesheets for css-selectors. Returns the content of the 
 * first match.
 *
 * @param   {string} selector The complete selector or part of it 
 *                            (e.g. 'user-md' for '.fa-user-md')
 * @returns {string}          The content of the 'content' attribute of the 
 *                            matching css-rule <br>
 *                            or '' if nothing has been found
 */
function findSymbolForClass(selector) {
  var result = '';
  var sheets = document.styleSheets;

  for (var sheetNr = 0; sheetNr < sheets.length; sheetNr++) {
    var content = findCSSRuleContent(sheets[sheetNr], selector);

    if (content) {
      result = stripQuotes(content);
      break;
    }
  }

  return result;
}

/**
 * Finds the first css-rule with a selectorText containing the given selector.
 *
 * @param   {CSSStyleSheet} mySheet  The stylesheet to examine
 * @param   {string}        selector The selector to match (or part of it)
 * @returns {string}                 The content of the matching rule <br>
 *                                   or '' if nothing has been found
 */
function findCSSRuleContent(mySheet, selector) {
  var ruleContent = '';
  var rules = mySheet.cssRules ? mySheet.cssRules : mySheet.rules;

  for (var i = 0; i < rules.length; i++) {
    var text = rules[i].selectorText;
    if (text && text.indexOf(selector) >= 0) {
      ruleContent = rules[i].style.content;
      break;
    }
  }

  return ruleContent;
}

/**
 * Strips one leading and one trailing Character from the given String.
 *
 * The 'content'-Tag is assigned by a quoted String, which will als be returned 
 * with those quotes.
 * So we need to strip them, if we want to access the real content
 *
 * @param   {String} string original quoted content
 * @returns {String}        unquoted content
 */
function stripQuotes(string) {
  var len = string.length;
  return string.slice(1, len - 1);
}

2. 在pdfMake中导入字体 现在我必须得到pdfMake才能知道Font,因此我需要将其转换.ttf为base64.
   我用.ttf从github上,并转换它这里
   然后我更新了vfs_fonts.js如上所述的github:
   (剥去base64s)

window.pdfMake = window.pdfMake || {};
window.pdfMake.vfs = {
  "LICENSE.txt"       : "...",
  "Roboto-Italic.ttf" : "...",
  "Roboto-Medium.ttf" : "...",
  "Roboto-Regular.ttf": "...",
  "sampleImage.jpg"   : "...",
  "FontAwesome.ttf"   : "..."
};

window.pdfMake.fonts = {
  Roboto     : {
    normal     : 'Roboto-Regular.ttf',
    bold       : 'Roboto-Medium.ttf',
    italics    : 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-Italic.ttf'
  },
  FontAwesome: {
    normal     : 'FontAwesome.ttf',
    bold       : 'FontAwesome.ttf',
    italics    : 'FontAwesome.ttf',
    bolditalics: 'FontAwesome.ttf'
  }
};

3. 设置正确的样式信息
   最后但并非最不重要的是,必须设置字体信息,所以我为此制作了一个简单的样式:

styles = {
  /*...*/
  symbol: {
    font: 'FontAwesome'
  },
  /*...*/
}

编辑为@nicfo指出,我错过了显示所有在一起的实际使用:
4.使用pdfmake中的符号

value = {
    text : FontAwesomeMap.findSymbolForClass(symbol) + '',
    style: ['symbol']
};

神奇的地方就是FontAwesomeMap.findSymbolForClass(symbol)上面提到的那个

就这样.不容易,但值得努力.

我很确定Glyphicons也能这样做.