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

Question

I am developing a webapp using pdfmake for the printing. In more recent days I started using Glyphicons and Font-Awesome-Icons in my project, now I need those in the printout as well.

But I can't really imagine what would be the best way to achieve this.

I see two possibilities:

1. Include the respective Font in pdfmake and create something like a map which determines the Icons font-representation by it's class name (because this is what is used in the app). In this case I could still use the font colors for the Icons

2. I could use something like phantomJS to generate Images of the Icons, but I don't really like this idea, because I would loose the possibility to easily change the icon's color and i would have to maintain this picture collection somehow.

Any Ideas, Comments or solutions? I would really appreciate it :)

Answer 1

I solved the problem as follows:
(I decided to use the first approach and narrowed the icons down to use Font-Awesome only)

1. Find the symbol by its css-class
   I was quite unhappy with the idea of fetching data from eg https://fortawesome.github.io/Font-Awesome/cheatsheet/ , so I did as a co-worker suggested: I parsed the symbol directly from the stylesheet:

 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. Import the Font in pdfMake Now I had to get pdfMake to know the Font, thus I needed to convert the .ttf to base64 .
   I used the .ttf from github and converted it here
   Afterwards I updated the vfs_fonts.js as described on github :
   (stripped the 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. Set proper style-informations
   Last but not least, the font-information has to be set, so I made a simple style for that:

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

edit as @nicfo pointed out, I missed to show the actual use of all together:
4. Use the symbols in pdfmake

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

where the magic FontAwesomeMap.findSymbolForClass(symbol) ist the one mentioned above

That's all. Not exactly easy, but it's worth the effort.

I'm pretty sure the same works for Glyphicons.