pdfmake - 在 vfs 上找不到字体文件答案

【问题标题】：pdfmake - cant find the font files on vfspdfmake - 在 vfs 上找不到字体文件
【发布时间】：2018-07-27 20:26:28
【问题描述】：

我有以下代码用于测试驱动器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” 在错误（本机）在 Object.fs.openSync (fs.js:642:18) 在 Object.fs.readFileSync (fs.js:510:33) 在 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) 在 /user_code/node_modules/pdfmake/src/textTools.js:258:27 在 Array.forEach （本机）在测量（/user_code/node_modules/pdfmake/src/textTools.js:240:13）

我需要做什么才能正确找到这些字体文件？

【问题讨论】：

标签： javascript fonts pdfmake

【解决方案1】：

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

【讨论】：

这里到底有什么问题？你的回答提到fonts nowhere。

【解决方案2】：

曾经遇到过类似问题，需要给出字体的准确位置。

它在字体之前也有标记通知。

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

在这些上尝试完整的目录路径：

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

或者有/缺少
const pdfFonts = require("pdfmake/

例如。
const pdfFonts = require("/pdfmake/

很简单，因为错误表明它无法从该位置找到字体，使用简单的 cd ./ 然后 cd /pdfmake/ 等和 ls 来检查位置。比较配置文件，应该可以正常工作。

【讨论】：

【解决方案3】：

我也为此苦苦挣扎。我找到的解决方案是在我的项目中实际包含字体文件。列出的文件位于我项目根目录的“字体”文件夹中，我的代码通过 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下载了字体文件。

希望这会有所帮助。

【讨论】：

【解决方案4】：

您可以通过简单的 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

顺便说一句 - 上述操作会转储 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 中使用

每个字体系列定义了 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 使用 'Roboto' 作为默认家族名称，因此为了使用您的字体，您应该更改它。最简单的方法是在 defaultStyle 中全局执行

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

所以，理想情况下，我建议你下载并把所有你想要的字体文件放在一个文件夹中，比如myProject/fonts/，然后尝试引用相同的文件在你的代码中。您的代码的正确 sn-p 看起来类似于：

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',
    }
};

希望这能解决您的问题。如有任何疑问，请随时提出。

【讨论】：

【解决方案5】：

这个错误主要发生在你使用 webpack 时。我们正在使用 webpack 并设法通过使用 webpack 导入加载器将其填充到窗口来解决此问题，如下所示：

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

希望这对其他人有帮助！

【讨论】：

【解决方案6】：

我正在使用 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

【讨论】：

【解决方案7】：

您也可以像这样使用，在我的情况下，工作区目录中的字体、控制器、助手目录。

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')
  }
}

【讨论】：

【解决方案8】：

对于电子（@vue-cli with electron-builder），这终于对我有用了：

yarn add pdfmake

然后在js/coffeescript代码中：

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

希望有帮助！

【讨论】：

【解决方案9】：

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

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

希望这会有所帮助。

【讨论】：