2

印刷用にpdfmakeを使用してwebappを開発しています。最近では、プロジェクトで Glyphicons と Font-Awesome-Icons を使い始めましたが、今では印刷物にもそれらが必要です。

しかし、これを達成するための最良の方法が何であるかを本当に想像することはできません。

2 つの可能性があります。

  1. それぞれのフォントをpdfmakeに含め、アイコンのフォント表現をクラス名で決定するマップのようなものを作成します（これがアプリで使用されるため）。この場合、アイコンにフォントの色を使用できます

  2. ファントム JS のようなものを使用してアイコンの画像を生成することもできますが、アイコンの色を簡単に変更する可能性が失われ、この画像コレクションを何らかの方法で維持する必要があるため、このアイデアはあまり好きではありません。

アイデア、コメント、または解決策はありますか? とても感謝しております ：）

4

1 に答える 1

10

次のように問題を解決しました：（
最初のアプローチを使用することにし、アイコンを絞り込んで 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ここで変換しました。その後、githubで説明されているよう に更新しました:
    vfs_fonts.js

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 が指摘したように編集します
。 

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

魔法FontAwesomeMap.findSymbolForClass(symbol)は上記のものです

それで全部です。簡単ではありませんが、努力する価値はあります。

Glyphicons でも同じことができると確信しています。

于 2015-09-30T13:01:16.827 に答える