pdfmake 生成字体
最近,我为一个客户开发了一项功能,该功能涉及从他的Angular Web应用程序生成PDF文档。 经过研究,我们决定为此目的使用PDFMake 。 (Recently I worked on a feature for a client that involved generating a PDF document from his Angular web application. After some research we decided to use PDFMake for this purpose.)
PDFMake is an excellent Javascript library for generating PDF documents. This short post is going to discuss how we can integrate the library with an Angular 9 app in a way that does not increase our initial bundle size!
PDFMake是用于生成PDF文档的优秀Javascript库。 这篇简短的文章将讨论如何以不增加初始捆绑包大小的方式将库与Angular 9应用程序集成!
为什么选择PDFMake? (Why PDFMake?)
We chose PDFMake because it allows us to specify the data for generation using a document definition object format. Other libraries required absolute positioning to position our content in the document. Since we had quite a lot of data and formatting to do, having an easier format saved us a lot of time!
我们之所以选择PDFMake,是因为它允许我们使用文档定义对象格式指定要生成的数据。 其他库需要绝对定位才能在文档中定位我们的内容。 由于我们要处理大量数据和格式化,因此使用更简单的格式可以节省大量时间!
To know more about PDFMake’s document definition object format, please refer to their official documentation.
要了解有关PDFMake文档定义对象格式的更多信息,请参阅其官方文档。
With this out of the way, let’s start integrating the library into an Angular app!
顺便说一句,让我们开始将库集成到Angular应用中!
设定 (Setting it up)
First, we’ll create a new Angular 9 app by executing the following commands in our terminal or console.
首先,我们将通过在终端或控制台中执行以下命令来创建新的Angular 9应用程序。
ng new angular-pdf-generator --routing=false
Let’s also add the Angular Material library, so we can use a material button to allow the user to generate the PDF.
我们还添加Angular Material库,以便我们可以使用Material按钮来允许用户生成PDF。
ng add @angular/material
Next, let’s include the required material modules in our app.module.ts file.
接下来,让我们在app.module.ts文件中包含必需的材料模块。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/cor