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

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何使用 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" 将条纹主题应用于表格。

doc.autotable({
    starty: 50,
    head: [tablecolumnheaders],
    body: tablerows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
        fontsize: 10,
        cellpadding: 5,
        valign: "middle",
    },
    headstyles: { fillcolor: [41, 128, 185], textcolor: 255, fontsize: 12 },
    alternaterowstyles: { fillcolor: [245, 245, 245] },
    columnstyles: { auto: { cellwidth: auto } },
    theme: "striped",
});

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

doc.save(`${filename}.pdf`);

这是此代码的完整版本。

// app.jsx

import "./styles.css";
import { generatepdf } from "./pdf.jsx";

export default function app() {
 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;
  };

  const pdfgenerator = () => {
    let jsondata = generateusers(100);
    generatepdf(jsondata);
  };
  return (
    <div classname="app">
      <h1>hello codesandbox</h1>
      <h2>start editing to see some magic happen!</h2>
      <button onclick={pdfgenerator}>print pdf</button>
    </div>
  );
}

//Pdf.jsx

import jsPDF from "jspdf";
import "jspdf-autotable";


export const generatePDF = (data) => {

  let fileName = "JS-pdf";
  const doc = new jsPDF("l", "pt", "a3");

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

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

  // Determine the table rows based on the values in data
  const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
          const value = row[key];

          if (Array.isArray(value)) {
            return value.join(", ");
          }
          return value; // Return non-array values as is
        })
  );

  doc.autoTable({
    startY: 50,
    head: [tableColumnHeaders],
    body: tableRows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
      fontSize: 10,
      cellPadding: 5,
      valign: "middle",
    },
    headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 12 },
    alternateRowStyles: { fillColor: [245, 245, 245] },
    columnStyles: { auto: { cellWidth: auto } }
    theme: "striped",
  });

  doc.save(`${fileName}.pdf`);
};

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

到这里，我们也就讲完了《如何使用 jsPDF 在 React 中从 JSON 数据创建 PDF》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！