【问题标题】:jsPDF PubSub Error – "No unicode cmap for font"jsPDF PubSub 错误 – “字体没有 unicode cmap”
【发布时间】:2019-08-26 15:46:16
【问题描述】:

我正在尝试向 jsPDF 添加自定义字体。我将文件转换为 base64 并执行了以下操作:

doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);

base64enc 是 base 64 编码的字符串

然后我添加字体如下:

doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');

doc.setFont('rajdhani');

但是,我不断收到以下错误

[Error] jsPDF PubSub Error – "No unicode cmap for font" – Error: No unicode cmap for font — jspdf.min.js:9068
Error: No unicode cmap for font — jspdf.min.js:9068registerTTF — jspdf.min.js:9068i — jspdf.min.js:9027:86open — jspdf.min.js:9032(anonymous function) — jspdf.min.js:6031publish — jspdf.min.js:308yt — jspdf.min.js:729:166addFont — jspdf.min.js:1286callme — freport.php:500onclick — freport.php:100
    publish (jspdf.min.js:29:5989)
    yt (jspdf.min.js:29:18435)
    addFont (jspdf.min.js:29:33701)
    callme (freport.php:500)
    onclick (freport.php:100)

我不知道为什么会这样。

【问题讨论】:

    标签: javascript html jspdf


    【解决方案1】:

    我也一直在苦苦挣扎,但我终于找到了方法!

    正如here 提到的,有一个由 jsPDF Contributors 制作的字体转换器,您可以在 here 上找到它。

    首先在此处上传您的字体,然后输入您的字体名称。它将生成 JS 文件,然后您需要将其包含在您的项目中。如果你愿意,这可以是你的 js 文件夹。

    一旦它在您的文件夹中,将此脚本标记添加到您的 index.html(或您需要 jsPDF 的任何 html 文件)。

    <script src="./fontName.js"></script>
    

    现在您已使用该文件自动将字体添加到 jsPDF Api,您可以继续从您的代码中删除以下两行

    doc.addFileToVFS("font/rajdhani-regular-webfont.woff", base64enc);
    doc.addFont('font/rajdhani-regular-webfont.woff', 'rajdhani', 'normal');
    

    完成此操作后,只需检查从转换器下载的文件,您应该会在最底部看到以下代码的第二个参数上的字体名称。

    this.addFont('fontFile.woff', 'THIS IS FONT NAME' , '.......');
    

    复制该名称。对于这个例子,让我们说它的 "rajdhani"。因此,您只需将其放在您在 jsPDF (doc) 实例上创建的任何文本之前。

    doc.setFont('rajdhani');
    

    你可以简单地用下面的方法测试它

    /* 
    "p" for portrait page orientation
    "pt" for points. default is mm
    "a4" is page size 
    */
    var doc = new jsPDF("p","pt","a4"); 
    doc.setFont('rajdhani');
    doc.text('This is a test', 20,20);
    doc.save('filename.pdf');
    

    现在您应该会看到一个 20px 左 20px 上边距的 pdf,用您的字体样式写着“这是一个测试”。

    希望这会有所帮助:)

    【讨论】:

    • 我遇到了与 OP 相同的错误并按照您的步骤操作,但我仍然收到相同的错误消息。我发布了一个新问题,希望您能提供意见。这是链接:stackoverflow.com/questions/58178191/…
    【解决方案2】:

    对于 ES6 模块用户,步骤也非常相似。

    如果您像我一样在这里寻找关于 Ionic 4 angular typescript 的解决方案,下面是对我有用的解决方案!

    首先你需要通过 npm 安装包,如下所示。

    npm install jspdf@latest --save
    

    在我之前的回复中提到之后,有一个由 jsPDF Contributors 制作的字体转换器,您可以在 here 上找到它。使用它上传您的字体文件并将其包含在您的项目中,以便在您的 TS 文件中易于引用的位置,以便它可以与 ts 文件位于同一文件夹中。

    -fontname-style.js // <<--- Here (This is the file you downloaded from converter)
    -custom.page.module.ts
    -custom.page.html
    -custom.page.scss
    -custom.page.spec.ts
    -custom.page.ts
    

    现在在您的 custom.page.ts 中导入以下内容;

    import * as jsPDF from 'jspdf';
    import './fontname-style.js';
    
    //OPTIONAL (Only import if you want to use autotable)
    import 'jspdf-autotable';
    import { autoTable as AutoTable } from 'jspdf-autotable';
    

    完成此操作后,只需检查从转换器下载的文件,您应该会在最底部看到以下代码第二个参数上的字体名称。

    this.addFont('fontFile.ttf', 'fontName' , '.......');

    现在您可以在 custom.page.ts 中创建这样的函数;

    //custom.component.ts or custom.page.ts etc.
    exportPDF(){
      var doc = new jsPDF("p","pt","a4"); // You can set your own  paramaters
      doc.setFont('fontName');
      doc.text('This is a test', 20,20); // You can set your own margins
      return doc.save('filename.pdf');
    }
    

    现在您应该会看到一个 pdf,其中 20px 左 20px 上边距用您的字体样式说“这是一个测试”:)

    可选插件 - 用于 jsPDF 的 AutoTable

    如果你想为 jsPDF 使用 autotable 插件,请从 npm 安装以下包。

    npm install jspdf-autotable@latest --save
    

    安装后,将这两个导入添加到您的 custom.page.ts

    import 'jspdf-autotable';
    import { autoTable as AutoTable } from 'jspdf-autotable';
    

    您可以根据需要创建列和标题数据

    在我们添加这些行之前创建的 exportPDF() 函数内部;

    //custom.component.ts or custom.page.ts etc.
    exportPDF(){
      var doc = new jsPDF("p","pt","a4");
      doc.setFont('fontName');
      doc.text('This is a test', 20,20); // <-- Remove this line
      ((doc as any).autoTable as AutoTable)({
        head: [['Name', 'Email', 'Country']], // <-- Table headers
        body: [                               // <-- Table body
                ['David', 'david@example.com', 'Sweden'],
                ['Castille', 'castille@example.com', 'Norway'],
                // ...
              ],
        styles: { font: "fontName" } /* <-- This is for the font to work in your 
      table */
      });
    
      return doc.save('filename.pdf');
    }
    

    现在您应该使用您的字体获得一个包含表格的 pdf :)

    我希望这对某人有所帮助。

    【讨论】:

      【解决方案3】:

      我遇到了同样的问题,并按照@TuncGerdan 解释的步骤进行操作。我的错误已清除,但我在控制台中收到以下警告。

      jspdf.min.js:29 Unable to look up font label for font 'font name', 'normal'. Refer to getFontList() for available fonts.
      

      当我使用 doc.getFontList() 获取字体列表时,我可以看到列表中包含的自定义字体。

      有人可以帮忙吗?

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-07-15
        • 2020-09-24
        • 2021-04-26
        • 1970-01-01
        • 2019-07-02
        • 2020-10-08
        • 2020-10-11
        相关资源
        最近更新 更多