循环通过PDFmake表的两个单独的数组

基础概念

PDFmake是一个用于生成PDF文件的JavaScript库。它允许开发者通过定义文档结构和样式来创建PDF文件。在PDFmake中，可以通过数组来定义文档的内容，每个数组元素代表文档的一部分，如文本、图像、表格等。

类型

PDFmake支持多种类型的文档内容，包括但不限于：

文本
图像
表格
列表
图形

应用场景

PDFmake广泛应用于以下场景：

报表生成
发票打印
合同签署
电子证书
数据导出

示例代码

假设我们有两个数组，分别代表PDF文档中的两个表格：

const table1Data = [
  ['Header 1', 'Header 2', 'Header 3'],
  ['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'],
  ['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3']
];

const table2Data = [
  ['Header A', 'Header B'],
  ['Row 1, Cell A', 'Row 1, Cell B'],
  ['Row 2, Cell A', 'Row 2, Cell B']
];

我们可以使用PDFmake来生成包含这两个表格的PDF文档：

const pdfDocGenerator = require('pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts'); // Fonts for PDF
pdfDocGenerator.vfs = pdfFonts.pdfMake.vfs;

const docDefinition = {
  content: [
    {
      table: {
        headerRows: 1,
        widths: ['*', '*', '*'],
        body: table1Data
      }
    },
    {
      table: {
        headerRows: 1,
        widths: ['*', '*'],
        body: table2Data
      }
    }
  ],
  defaultStyle: {
    fontSize: 12
  }
};

pdfDocGenerator.createPdf(docDefinition).download('document.pdf');

遇到的问题及解决方法

问题：表格内容超出页面边界

原因：表格内容过多，导致超出PDF页面的边界。

解决方法：

调整表格宽度：通过设置widths属性来调整表格列的宽度。
分页：PDFmake会自动处理分页，但如果需要更精细的控制，可以使用pageBreak属性。

const docDefinition = {
  content: [
    {
      table: {
        headerRows: 1,
        widths: ['*', '*', '*'],
        body: table1Data
      }
    },
    { text: 'Page Break', pageBreak: 'after' },
    {
      table: {
        headerRows: 1,
        widths: ['*', '*'],
        body: table2Data
      }
    }
  ],
  defaultStyle: {
    fontSize: 12
  }
};

问题：字体不显示或乱码

原因：PDFmake默认使用的字体可能不支持某些字符。

解决方法：

自定义字体：加载自定义字体文件，并在文档定义中指定使用该字体。

const pdfFonts = {
  Roboto: {
    normal: 'path/to/Roboto-Regular.ttf',
    bold: 'path/to/Roboto-Bold.ttf',
    italics: 'path/to/Roboto-Italic.ttf',
    bolditalics: 'path/to/Roboto-BoldItalic.ttf'
  }
};

const docDefinition = {
  content: [
    {
      text: 'Hello, World!',
      font: 'Roboto'
    }
  ],
  defaultStyle: {
    font: 'Roboto'
  }
};