Question

我使用以下代码来测试驱动器PDFmake。我遇到了字体文件的位置问题。我看到文档似乎表明在拉入 vfs_fonts 文件之后我应该能够看到它们。然而，对我来说情况并非如此。

function createPdf(assessmentId: string): string {
  const pdfMake = require('pdfmake/build/pdfmake.js');
  const pdfFonts = require('pdfmake/build/vfs_fonts.js');
  pdfMake.vfs = pdfFonts.pdfMake.vfs;

  //required font setup, requires that you link to the fonts shipped with npm

  const fontDescriptors = {
    Roboto: {
      normal: 'Roboto-Regular.ttf',
      bold: 'Roboto-Medium.ttf',
      italics: 'Roboto-Italic.ttf',
      bolditalics: 'Roboto-Italic.ttf',
    }
  };
  const termpaper = new PdfLayout();
  const docDefinition = termpaper.layout
  const printer = new Printer(fontDescriptors);

  //get a reference to the PdfKit instance, which is a streaming interface

  const pdfDoc = printer.createPdfKitDocument(docDefinition);

  return "pdflocation";
}

执行此代码时，我收到此错误。

错误：

ENOENT：没有这样的文件或目录，打开'Roboto-Medium.ttf'       在错误（本机）       at Object.fs.openSync（fs.js：642：18）       在Object.fs.readFileSync（fs.js：510：33）       at Object.fontkit.openSync（/user_code/node_modules/pdfmake/node_modules/fontkit/index.js:43:19）       在Function.PDFFont.open（/user_code/node_modules/pdfmake/node_modules/pdfkit/js/font.js:14:24）       在PDFDocument.font（/user_code/node_modules/pdfmake/node_modules/pdfkit/js/mixins/fonts.js:39:28）       在FontProvider.provideFont（/user_code/node_modules/pdfmake/src/fontProvider.js:49:58）       at /user_code/node_modules/pdfmake/src/textTools.js:258:27       at Array.forEach（native）       at measure（/user_code/node_modules/pdfmake/src/textTools.js:240:13）

如何正确查找这些字体文件需要做什么？

Answer 1

有一次类似的问题，你需要给出字体的确切位置。

它还在字体之前标记了通知。

//所需的字体设置，要求您链接到npm附带的字体

尝试完整的目录路径：

    normal: '/Exampledir/pdfmake/Roboto-Regular.ttf',
    bold: 'Roboto-Medium.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-Italic.ttf',

或者有/缺少
const pdfFonts = require（＆＃34; pdfmake /

EG。
const pdfFonts = require（＆＃34; / pdfmake /

就是这么简单，因为错误表明它无法从该位置找到字体，用简单的cd./然后cd / pdfmake / etc和ls来检查位置。比较配置文件，应该让它工作。

Answer 2

我也在努力解决这个问题。我找到的解决方案是在我的项目中实际包含字体文件。列出的文件位于项目根目录的'fonts'文件夹中，我的代码通过uri引用它们：

const fonts = {
    Roboto: {
        normal: 'fonts/Roboto-Regular.ttf',
        bold: 'fonts/Roboto-Medium.ttf',
        italics: 'fonts/Roboto-Italic.ttf',
        bolditalics: 'fonts/Roboto-MediumItalic.ttf'
    }
};

我从here下载了字体文件。

希望这有帮助。

Answer 3

您可以通过简单的3个步骤轻松使用自定义字体：

要使用自定义字体，需要执行3个步骤：

创建包含字体的vfs_fonts.js
定义字体系列
更改doc-definition-object

<强> 1。创建包含字体的vfs_fonts.js

将字体复制到myProject / fonts /目录

运行grunt dump_dir（如果你想更改基目录或为dump_dir任务添加备用配置，你可以更新Gruntfile.js）

在您的网页上使用新的 build / vfs_fonts.js

BTW - 上面的操作会转储myProject / fonts /中的所有文件（不仅仅是字体），这意味着您可以将图像放在那里，运行grunt dump_dir并在doc-definition-object中按名称引用它们

<强> 2。定义字体系列

在致电pdfMake.createPdf(docDefinition)将 pdfMake.fonts 设为以下对象之前：

{
   yourFontName: {
     normal: 'fontFile.ttf',
     bold: 'fontFile2.ttf',
     italics: 'fontFile3.ttf',
     bolditalics: 'fontFile4.ttf'
   },
   anotherFontName: {
     (...)
   }
}

键是您稍后可以在doc-definition
中使用的字体系列名称

每个font-family定义4个属性：normal，bold，italics和bold-italics引用适当的文件（默认情况下，这些是相对于 myProject / fonts / 的文件路径）



默认情况下，pdfMake使用以下结构：

{
        Roboto: {
                normal: 'Roboto-Regular.ttf',
                bold: 'Roboto-Medium.ttf',
                italics: 'Roboto-Italic.ttf',
                bolditalics: 'Roboto-Italic.ttf'
        }
};

第3。更改doc-definition-object

中的字体系列

目前pdfmake使用＆＃39; Roboto＆＃39;作为默认系列名称，因此为了使用您的字体，您应该更改它。最简单的方法是在defaultStyle
中全局完成

var docDefinition = {
  content: (...),
  defaultStyle: {
    font: 'yourFontName'
  }
}

所以，理想情况下，我建议您下载并将所需的所有字体文件放在一个文件夹中，例如 myProject / fonts / ，然后尝试引用它在你的代码中。您的代码的正确代码段看起来类似于：

const fontDescriptors = {
    Roboto: {
      normal: 'myProject/fonts/Roboto-Regular.ttf',
      bold: 'myProject/fonts/Roboto-Medium.ttf',
      italics: 'myProject/fonts/Roboto-Italic.ttf',
      bolditalics: 'myProject/fonts/Roboto-Italic.ttf',
    }
};

希望这可以解决您的问题。如果有的话，请随意提出疑问。

Answer 4

使用webpack时，通常会出现此错误。我们正在使用webpack并设法通过使用webpack imports-loader将其填充到窗口中来解决此问题：

var fonts = require('imports?this=>window!pdfmake/build/vfs_fonts.js');

修复：

function createPdf(assessmentId: string): string {

  const pdfMake = require('pdfmake/build/pdfmake.js');

  const pdfFonts = require('pdfmake/build/vfs_fonts.js');// this line will give an error if you are working with webpack .

var字体= require（'imports？this => window！pdfmake / build / vfs_fonts.js'）; //使用此行对其进行修复

  pdfMake.vfs = pdfFonts.pdfMake.vfs;

  //required font setup, requires that you link to the fonts shipped with npm

  const fontDescriptors = {
    Roboto: {
      normal: 'Roboto-Regular.ttf',
      bold: 'Roboto-Medium.ttf',
      italics: 'Roboto-Italic.ttf',
      bolditalics: 'Roboto-Italic.ttf',
    }
  };
  const termpaper = new PdfLayout();
  const docDefinition = termpaper.layout
  const printer = new Printer(fontDescriptors);

  //get a reference to the PdfKit instance, which is a streaming interface

  const pdfDoc = printer.createPdfKitDocument(docDefinition);

  return "pdflocation";
}

希望这对其他人有帮助！

Answer 5

您也可以这样使用，在我的情况下，我的字体，控制器，帮助程序目录位于工作空间目录中。

const path = require('path'); // path is give you a working directory path.resolve() and you can give your font file path.

const fontDescriptors = {
  Roboto: {
    normal: path.resolve('./fonts/Roboto-Regular.ttf'),
    bold: path.resolve('./fonts/Roboto-Medium.ttf'),
    italics: path.resolve('./fonts/Roboto-Italic.ttf'),
    bolditalics: path.resolve('./fonts/Roboto-MediumItalic.ttf')
  }
}

Answer 6

function createPdf(assessmentId: string): string {
  const pdfMake = require("pdfmake/build/pdfmake.js");
  const pdfFonts = require("pdfmake/build/vfs_fonts.js");
  pdfMake.vfs = pdfFonts.pdfMake.vfs;
  const projectId = "crds-wayfinder-int";
  const philstorage = new gcs({
    projectId: projectId
  });

  // required font setup, requires that you link to the fonts shipped with npm

  const termpaper = new PdfLayout();
  const docDefinition = termpaper.layout;

  // get a reference to the PdfKit instance, which is a streaming interface
  const pdfDoc = pdfMake.createPdf(docDefinition);
  pdfDoc.getBuffer((buffer: any) => {
    console.log('buffer: ', buffer);
  });

  console.log('pdfDoc: ', pdfDoc);

  return "pdflocation";
}

Answer 7

我正在使用React和datatables.net。这对我有用：

import React from 'react';
import $ from 'jquery';

import 'datatables.net-bs';
import 'datatables.net-buttons-bs';
import 'datatables.net-responsive-bs';
import 'datatables.net-buttons/js/buttons.colVis.js';
import 'datatables.net-buttons/js/buttons.flash.js';
import 'jszip';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-buttons/js/buttons.print.js';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'datatables.net-bs/css/dataTables.bootstrap.css';

$.DataTable = require('datatables.net');
pdfMake.vfs = pdfFonts.pdfMake.vfs; // This line solved the Roboto errors

require("datatables.net-buttons/js/buttons.colVis.js"); // Column visibility
require("datatables.net-buttons/js/buttons.html5.js"); // HTML 5 file export
require("datatables.net-buttons/js/buttons.flash.js"); // Flash file export
require("datatables.net-buttons/js/buttons.print.js"); // Print view button

Answer 8

对于电子（@ vue-cli，带有电子生成器），这最终对我有用：

yarn add pdfmake

然后使用js /咖啡代码：

import pdfMake from 'pdfmake/build/pdfmake.min.js'
import pdfFonts from 'pdfmake/build/vfs_fonts.js'

# this did the trick:
pdfMake.vfs = pdfFonts.pdfMake.vfs

希望有帮助！

Answer 9

我最近遇到了这个问题。我尝试按照their docs上的步骤进行操作，但发现与您相同的错误。我的字体已成功添加到我的node_modules中的子目录中。我的错误是当我运行命令gulp buildFonts时，它没有在vfs_fonts.js文件中添加准备好的字体。

事实证明，我们必须将字体准确地放在examples/fonts子目录中。或者，您也可以重新配置gulpfile.js，以便将默认子目录更改为您要放置字体的目录。

希望这会有所帮助。

pdfmake - 无法在vfs上找到字体文件

9 个答案: