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

Question

我正在获取

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

在angular 6中尝试使用pdfMake时。

我做了

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

在打字.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();
}

Answer 2

for ts file
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
constructor(){
pdfMake.vfs = pdfFonts.pdfMake.vfs;
}

Answer 3

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

Answer 4

我通过以下步骤解决了这个问题：pdf制造站点

我必须做以下步骤：

• 转到程序包目录/node_modules/pdfmake/
• 在pdfmake代码目录中创建examples/fonts子目录(如果它还不存在(
• 将您的字体(以及您希望嵌入的其他文件(复制到examples/font子目录中
• 运行命令"nodebuild-vfs.js"/示例/字体"。或者运行nodebuild-vfs.js来显示帮助
• 在代码中包含新的build/vfs_fonts.js文件(就像包含pdfmake.js或pdfmake.min.js一样(