Angular 7 AmCharts PDF字体

Question

我正在使用Angular 7和AmCharts，并且我正在导出一个PDF (使用包含的pdfmake库)，但是我不能改变生成的PDF的默认字体。我已经创建了包含所需字体的vfs_fonts.js，并将其包含在我的angular.json的scripts部分中。在我生成报告的组件中，我执行以下操作：

let pdfMake = res[0];

pdfMake.fonts = {
    "Open Sans": {
        "normal": 'OpenSans-Regular.ttf',
        "bold": 'OpenSans-Bold.ttf',
        "italics": 'OpenSans-Italic.ttf',
        "bolditalics": 'OpenSans-BoldItalic.ttf'
    }
}

let doc = {
    header: this.drawHeader(),
    footer: this.drawFooter(),
    pageSize: "A4",
    pageOrientation: "portrait",
    pageMargins: [40, 80, 40, 60],
    content: [],
    defaultStyle: {
        font: "Open Sans"
    }
};

但我得到以下错误：

ERROR Error: Uncaught (in promise): Error: Font 'Open Sans' in style 'normal' is not defined in the font section of the document definition.
Error: Font 'Open Sans' in style 'normal' is not defined in the font section of the document definition

我该怎么解决呢？谢谢

Answer 1

我在更改pdf make库的字体时也遇到了同样的问题。我使用以下步骤解决了这个问题。

最初，请下载所需字体的.ttf文件。

步骤1)

转到以下路径-> node_modules -> pdfmake

步骤2)

在pdfmake目录中，创建名为examples的文件夹。转到examples文件夹，在里面创建一个名为fonts的文件夹。

第3步)现在将下载的.ttf文件粘贴到fonts文件夹中。(path_to_paste_ttf_File : node_modules/pdfmake/examples/fonts)

一旦您将文件粘贴到该文件夹中。继续执行步骤4

步骤4)

转到fonts文件夹的路径，如终端中所述，请在图像终端路径下查找以供参考。

步骤5)

一旦你完成了step4，朗姆酒gulb buildFonts。您的输出将如下图所示。

一旦你成功地构建了你的字体。

转到要在其中生成pdf的组件的.ts文件。

.ts文件内部

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;


async generatePdf(value){
        pdfMake.fonts = {
            Roboto: {
                normal: 'Roboto-Regular.ttf',
                bold: 'Roboto-Medium.ttf',
                italics: 'Roboto-Italic.ttf',
                bolditalics: 'Roboto-MediumItalic.ttf'
            }
        };
        const documentDefinition = await this.getDocumentDefinition();
        pdfMake.createPdf(documentDefinition).open();
    }
    getDocumentDefinition(){
        return {
            content: (...),
              defaultStyle: {
                    font: 'yourFontName' //in this case it's roboto.
            }
        }               
    }

这解决了我的问题，如果你遇到任何困难，请让我知道。

有关更多参考信息，请访问official document

Answer 2

关于如何在客户端here上使用自定义字体的Pdfmake文档。

vfs_fonts.js文件格式类似于：

this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
  "Roboto-Italic.ttf": "AAEAAAASAQAABAAgR0RFRtRX1"
}

因此，您应该像下面这样定义它：

window.pdfMake.vfs["OpenSans-Regular.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["OpenSans-Bold.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["OpenSans-Italic.ttf"] = "BASE 64 HERE";
window.pdfMake.vfs["OpenSans-BoldItalic.ttf"] = "BASE 64 HERE";

在此之后，您仍然需要分配pdfMake.fonts：

开放式sans变体：https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans:400,400i,600i,700

pdfMake.fonts = {
    // Make sure you define all 4 components - normal, bold, italics, bolditalics - (even if they all point to the same font file)
    "Open Sans": {  <======================= TRY WITH "OpenSans" too
        "normal": 'OpenSans-Regular.ttf',
        "bold": 'OpenSans-Bold.ttf',
        "italics": 'OpenSans-Italic.ttf',
        "bolditalics": 'OpenSans-BoldItalic.ttf'
    }
};

另一种可能的解决方案：(不确定它是否有效)

let pdfMake = res[0];
let pdfFonts = require('./vfs_fonts');

pdfMake.addVirtualFileSystem(pdfFonts);

Answer 3

这可能是由于Open Sans中的空格造成的。尝试将其更改为OpenSans