在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 * (eg '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 。
   我使用了來自github的.ttf並將其轉換為此處
   之后我按照github上的描述更新了vfs_fonts.js ：
   （剝離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也能這樣做。