在 Angular 6 的虚拟文件系统中找不到文件“Roboto-Regular.ttf”（pdfMake）答案

【问题标题】：File 'Roboto-Regular.ttf' not found in virtual file system in Angular 6 (pdfMake)在 Angular 6 的虚拟文件系统中找不到文件“Roboto-Regular.ttf”（pdfMake）
【发布时间】：2018-12-04 22:19:50
【问题描述】：

我来了

错误错误：在虚拟文件中找不到文件“Roboto-Regular.ttf” 系统

在角度 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>

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

UPD 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;

已解决。

【问题讨论】：

标签： angular typescript pdfmake

【解决方案1】：

for ts file

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

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

【讨论】：

我收到一个错误：vfs 是只读的。你在使用打字稿吗？你是怎么解决这个问题的？

【解决方案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();
}

【讨论】：

【解决方案3】：

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

【讨论】：