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

Question

我正在开发一个使用 pdfmake 进行打印的网络应用程序。最近几天，我开始在我的项目中使用 Glyphicons 和 Font-Awesome-Icons，现在我在打印输出中也需要它们。

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

我看到两种可能性:

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

2. 我可以使用类似 phantomJS 的东西来生成图标的图像，但我不太喜欢这个想法，因为我会失去轻松更改图标颜色的可能性，而且我必须维护这个图片集不知何故。

有任何想法、意见或解决方案吗？我真的很感激:)

Answer 1

我解决的问题如下:
(我决定使用第一种方法并将图标缩小到仅使用 Font-Awesome)

1. 通过其 css-class 查找符号
   我对从例如数据库中获取数据的想法非常不满意。 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);
}

1. 在pdfMake中导入字体现在我必须让 pdfMake 知道字体，因此我需要将 .ttf 转换为 base64。
   我使用了 github 中的 .ttf并转换它here
   之后我按照 github 中的描述更新了 vfs_fonts.js :
   (去除 base64)

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'
  }
};

1. 设置适当的样式信息
   最后但同样重要的是，必须设置字体信息，所以我为此做了一个简单的样式:

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

编辑 正如@nicfo 指出的那样，我错过了一起展示所有内容的实际用法:
4. 使用pdfmake中的符号

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

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

就是这样。这并不容易，但值得付出努力。

我很确定这同样适用于 Glyphicons。