如何使用 jsPDF 在 React 中从 JSON 数据创建 PDF

本文将展示如何在 JS/React 中从 JSON 数据创建 PDF。

作为开发人员，我们必须将 PDF 生成集成到应用程序中。因此，在本文中，我们将讨论使用 jspdf 创建 PDF。

那么，让我们开始吧。

我们将专门为本文使用 React 环境。我假设你熟悉 JavaScript/React 并且已经设置了 React 环境

在深入研究之前，我们需要一些示例数据来生成 PDF。我们将创建一个方法来生成这些数据。

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

现在，我们需要安装一些 npm 包 jspdf 和 jspdf-autotable。

jsPDF 负责创建 PDF，而 jsPDF-AutoTable 用于在 PDF 中以表格格式显示数据。

您可以使用以下命令来安装这两个软件包。

npm i jspdf-autotable jspdf

现在，我们将开发一种处理 PDF 创建的方法。我将创建一个通用的generatePDF方法，这样你就可以在任何需要的地方使用它。

1。函数定义

函数generatePDF将数据作为参数，该参数应该是一个对象数组（要包含在PDF中的JSON数据）。

export const generatePDF = (data) => {

2。 PDF 文档设置
使用以下选项创建一个新的 jsPDF 实例：

• “l”表示横向。
• “pt”作为测量单位（点）。
• “a3”作为纸张尺寸。

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3。为 PDF 添加标题

• 将字体大小设置为 16 磅。
• 在页面顶部（y 位置为 30）添加居中标题“JSON 数据 PDF”。

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4。提取表头

• 从数据中的第一个对象中提取键以用作表的列标题。
• 假设数据至少有一个对象，并且所有对象都有相似的键。

const tableColumnHeaders = Object.keys(data[0]);

5。设置表格行格式

迭代数据中的每个对象，创建一个新数组（tableRows），其中：

• 每个条目对应表格的一行。
• 对于每个单元格，如果值为数组，则用逗号连接元素；否则，它会按原样添加值。

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6。将表格添加到 PDF

使用以下选项配置表：

• startY: 50 将表格放置在页面顶部下方 50 点处。
• head 使用 tableColumnHeaders 作为表格的标题行。
• body 填充了 tableRows，逐行显示数据。
• margin 指定表格周围的间距。
• 样式调整单元格字体大小、填充和垂直对齐方式。
• headStyles 设置标题行样式：蓝色背景、白色文本和 12 号字体。
• alternateRowStyles 为交替行添加浅灰色背景。
• columnStyles 尝试自动设置列宽。
• theme: "striped" 将条纹主题应用于表格。

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

7。保存 PDF
以文件名“JS-pdf.pdf”保存 PDF 文件。

npm i jspdf-autotable jspdf

这是此代码的完整版本。

export const generatePDF = (data) => {

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

现在已经完成了。希望你喜欢它。祝你有美好的一天！！！

以上是如何使用 jsPDF 在 React 中从 JSON 数据创建 PDF的详细内容。更多信息请关注PHP中文网其他相关文章！