Question

我无法让FontAwesome字体显示在PDF上。我已按照列出here以及here的步骤进行操作，但无济于事。我使用Grunt创建了vfs_fonts.js并更改了FontAwesome的base64。我还使用pdfMake.font创建了新字体。

我遇到的问题是，当我运行generatePDF方法时，它会在行"Cannot read property 'length' of null"处显示for (var i = 0; i < rules.length; i++) {。因此，我记录了样式表对象，它显示cssRules和rules属性都是null。

任何帮助将不胜感激！

*编辑* 下面是我的JS脚本代码，vfs_fonts.js文件和HTML文件。

JS脚本：

var dd = {
    content: [
        {text: FontAwesomeMap.findSymbolForClass('fa-align-justify') + '', style: ['symbol']},
      ...
    ],
    styles: {
      symbol: {
        font: 'FontAwesome'
      }
    },
    ...
};


    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;

      console.log(sheets);

      for (var sheetNr = 0; sheetNr < sheets.length; sheetNr++) {
        console.log(sheets[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) {
      console.log(mySheet.cssRules); // Log shows as null
      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);
    }

vfs_fonts.js文件：

window.pdfMake = window.pdfMake || {};
window.pdfMake.vfs = {
  "LICENSE.txt"       : "...",
  "Roboto-Italic.ttf" : "...",
  "Roboto-Medium.ttf" : "...",
  "Roboto-Regular.ttf": "...",
  "fontawesome-webfont.ttf"   : "..."
};

window.pdfMake.fonts = {
  Roboto       : {
    normal     : 'Roboto-Regular.ttf',
    bold       : 'Roboto-Medium.ttf',
    italics    : 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-Italic.ttf'
  },
  FontAwesome  : {
    normal     : 'fontawesome-webfont.ttf',
    bold       : 'fontawesome-webfont.ttf',
    italics    : 'fontawesome-webfont.ttf',
    bolditalics: 'fontawesome-webfont.ttf'
  }
};

HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>PDF Generator</title>
  <link rel="stylesheet" type="text/css" href="font-awesome.css">
</head>

<body>
  ...

  <script type="text/javascript" src="bower_components/pdfmake/build/pdfmake.min.js"></script>
  <script type="text/javascript" src="bower_components/pdfmake/build/vfs_fonts.js"></script>

  <script type="text/javascript" src="pdfmake_example.js"></script>
</body>

</html>

无法在pdfMake中使用FontAwesome

0 个答案: