pdfMake 打开一个空选项卡答案

【问题标题】：pdfMake opens an empty tabpdfMake 打开一个空选项卡
【发布时间】：2022-06-13 17:36:23
【问题描述】：

我正在尝试在我的 Web 应用程序中实现 pdf 生成，因此我决定为此使用 pdfMake。

然而，在导入所有需要的东西之后……

import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

我的pdf生成函数：

generatePDF() {  
let docDefinition = {  
  header: 'C#Corner PDF Header',  
  content: 'Sample PDF generated with Angular and PDFMake for C#Corner Blog'  
};  

pdfMake.createPdf(docDefinition).open();
}

我的按钮代码：

<button class="botright" (click)="generatePDF()" mat-raised-button >Téléchargez le bordereau de prise en charge <mat-icon>picture_as_pdf</mat-icon></button>

...单击我分配的打开 pdf 的按钮只会打开一个 blank web page

【问题讨论】：

标签： html css angular frontend pdf-generation

【解决方案1】：

您可以检查浏览器控制台中出现的错误，但如果我不得不猜测，我会说这很可能是由 'content' 变量的错误格式引起的，这里声明为字符串而不是数组：

来自pdfmake's playground 的示例：

var documentDefinition = {
    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure, 
this line will be divided into at least two lines'
    ]
}

【讨论】：