在 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

for ts file

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

constructor(){
    pdfMake.vfs = pdfFonts.pdfMake.vfs;
}

Answer 2

使用 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();
}

Answer 3

对于 Angular 9-10，打开 angular.json 在两个脚本部分下添加以下内容... "./node_modules/pdfmake/build/pdfmake.min.js", "./node_modules/pdfmake/build/vfs_fonts.js"

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

File 'Roboto-Regular.ttf' not found in virtual file system in Angular 6 (pdfMake)

angular

typescript

pdfmake