angular - 在 Angular 6 的虚拟文件系统中找不到文件 'Roboto-Regular.ttf' (pdfMake)

Question

我得到

ERROR Error: File 'Roboto-Regular.ttf' not found in virtual file system

尝试在 Angular 6 中使用 pdfMake 时。

我做到了

declare module 'pdfmake/build/pdfmake.js';
declare module 'pdfmake/build/vfs_fonts.js';`

在typings.d.ts 中，还有

"typeRoots": [
  "node_modules/@types",
  "../src/typings.d.ts"
],

在 tsconfig.json 中。

在我使用 pdfmake 的组件中

import 'pdfmake/build/vfs_fonts.js';
import * as pdfMake from 'pdfmake/build/pdfmake.js';

似乎正在加载 vfs_fonts.js，因为我将 console.log 添加到了该文件并且它可以工作。

我也尝试添加

<script src="./assets/fonts/vfs.js"></script>

但仍然遇到同样的错误。 也许有人对此有解决方案？

更新1: 之前导入pdfmake.js没有解决问题

import * as pdfMake from 'pdfmake/build/pdfmake.js';
import 'pdfmake/build/vfs_fonts.js';

解决方案:

import * as pdfFonts from 'pdfmake/build/vfs_fonts';

和

pdfMake.vfs = pdfFonts.pdfMake.vfs;

已解决。

Answer 1

使用 NPM 安装脚本:

npm i -S pdfmake
npm i -D @types/pdfmake

在你的 Angular 组件/服务中:

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';

// ...

public downloadPdf(): void
{
  const pdfData: TDocumentDefinitions = {
    content: [
      'First paragraph'
    ]
  };

  const pdfFile = pdfMake.createPdf(pdfData, null, null, pdfFonts.pdfMake.vfs);

  pdfFile.download();
}