pdfmake - 使用自己的字体不起作用

Question

我正在使用 pdfmake 在客户端创建 PDF。我们有一个 WYSIWYG 编辑器，允许用户创建 pdf。然后将其解析为与 pdfmake 一起使用。

但是，我无法使用普通字体。该插件使用vfs_fonts.js在 PDF 上创建字体，默认为 Roboto。

我正试图让它与 Times New Roman 等公司合作。

我试图像这样改变文件：

window.pdfMake = window.pdfMake || {};
window.pdfMake.vfs = {
  Roboto: {
		"Roboto-Italic.ttf": "BASE 64 HERE",
        "Roboto-Medium.ttf": "BASE 64 HERE",
        "Roboto-Regular.ttf": "BASE 64 HERE"
  },
  TimesNewRoman: {
        "Roboto-Italic.ttf": "BASE 64 HERE",
        "Roboto-Medium.ttf": "BASE 64 HERE",
        "Roboto-Regular.ttf": "BASE 64 HERE"
  }
}

我使用了与 Roboto 相同的字体作为测试，但它仍然不起作用。这是我回来的错误

Uncaught Error: No unicode cmap for font

下面是我的代码。您将此字符串粘贴到此处的pdf 测试器中并查看结果

Uncaught Error: No unicode cmap for font

有没有其他人使用过这个库？如果是这样，您是否使用了自定义字体，您是如何让它们工作的？如果需要，我可以发布更多代码，谢谢

Answer 1

关于如何在客户端使用自定义字体的 Pdfmake 文档在这里。

vfs_fonts.js 文件格式类似于：

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
  "Roboto-Italic.ttf": "AAEAAAASAQAABAAgR0RFRtRX1"
}

因此，您应该像下面这样定义它：

window.pdfMake.vfs["Times-New-Roman-Regular.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["Times-New-Roman-Medium.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["Times-New-Roman-Italic.ttf"] = "BASE 64 HERE";

之后，您仍然需要分配pdfMake.fonts：

pdfMake.fonts = {
    // Default font should still be available
    Roboto: {
        normal: 'Roboto-Regular.ttf',
        bold: 'Roboto-Medium.ttf',
        italics: 'Roboto-Italic.ttf',
        bolditalics: 'Roboto-Italic.ttf'
    },
    // Make sure you define all 4 components - normal, bold, italics, bolditalics - (even if they all point to the same font file)
    TimesNewRoman: {
        normal: 'Times-New-Roman-Regular.ttf',
        bold: 'Times-New-Roman-Bold.ttf',
        italics: 'Times-New-Roman-Italics.ttf',
        bolditalics: 'Times-New-Roman-Italics.ttf'
    }
};

然后，您可以像现在一样在 pdf 定义中同时使用Robot和TimesNewRoman作为字体：

{  
   content:[  
      {  
         text: 'some text using Roboto font'
         style: 'style_1'
      },
      {  
         text: 'some text using Times New Roman font'
         font: 'TimesNewRoman'
      }
   ],
   styles:{  
      style_1:{  
         opacity: '1',
         font: 'Roboto'
      }
   }
}