在Angular 6（pdfMake）中，虚拟文件系统中找不到'Roboto-Regular.ttf'文件。

Question

我遇到了问题：

ERROR Error: 文件 'Roboto-Regular.ttf' 在虚拟文件系统中未找到。

当我尝试在 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';

看起来是因为我在这个文件中添加了console.log，所以vfs_fonts.js被加载了。

另外我试着只添加了

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

问题已解决。

- rankery

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

- Gil Epshtain

Answer 2

for ts file

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

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

- Sri Darshana

---

我遇到了一个错误：“vfs”是只读的。你在使用typescript吗？你是如何解决这个问题的？ - Gil Epshtain

@GilEpshtain 使用 ( <任何> pdfMake ).vfs = pdfFonts.pdfMake.vfs。 - NoNam4

Answer 3

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

- Jonthan Ulfeng

Answer 4

我通过以下步骤解决了这个问题，来源为：pdfMake网站。

我需要执行以下步骤：

• 进入包目录./node_modules/pdfmake/
• 如果不存在，在pdfmake代码目录中创建examples/fonts子目录。
• 将您的字体文件（和其他想要嵌入的文件）复制到examples/fonts子目录中。
• 运行命令node build-vfs.js "./examples/fonts"。或者运行node build-vfs.js以获取帮助信息。
• 按照与包含pdfmake.js或pdfmake.min.js相同的方式，将新的build/vfs_fonts.js文件包含在您的代码中。

- David