在 jsPDF 和 jspdf-autotable 中格式化具有多列的大表-解网

问：

我正在做一个项目，我需要使用 jsPDF 和 jspdf-autotable 生成一个包含大量列的表格的 PDF 报告。但是，由于列数众多，我在表格格式方面面临挑战。

我已经在我的 React 组件中实现了基本的表格生成和数据获取逻辑。这是我当前代码的简化版本：

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

  const generatePDF = async () => {
    const doc = new jsPDF();
    doc.text("Report Heading", 10, 10);

    const columns = [
      "Total Hour",
      "Machine On Time",
      "Rejection Quantity",
      "Actual Production",
      "part_2055566_3rd",
      "Production",
      "Target Production",
      "First Cycle",
      "Last Cycle",
      "part_8PEE027000161N_2ND",
      "Average Cycle Time",
      "Production Time",
      "Ideal Time",
      "Mhr Loss",
    ];
    const rows = pdfData.map(
      (
        item: {
          totalHour: number;
          machineOnTime: number;
          rejectionQuantity: number;
          actualProduction: number;
          part_2055566_3rd: number;
          production: number;
          targetProduction: number;
          firstCycle: number;
          lastCycle: number;
          part_8PEE027000161N_2ND: number;
          avgCycleTime: number;
          productionTime: number;
          idealTime: number;
          mhrLoss: number;
        },
        index: number
      ) => [
        // index + 1,
        item.totalHour,
        item.machineOnTime,
        item.rejectionQuantity,
        item.actualProduction,
        item.part_2055566_3rd,
        item.production,
        item.targetProduction,
        item.firstCycle,
        item.lastCycle,
        item.part_8PEE027000161N_2ND,
        item.avgCycleTime,
        item.productionTime,
        item.idealTime,
        item.mhrLoss,
      ]
    );

    autoTable(doc, {
      head: [columns],
      body: rows,
      startY: 20,
      theme: "striped",
      

      didDrawPage: (data) => {
        doc.text("Production Summary : ", data.settings.margin.left, 15);
      },
    });

    doc.save(`${formattedDate}Report.pdf`);
  };

> PDF 数据样本

{
      "totalHour": 22,
      "machineOnTime": 1440,
      "rejectionQuantity": 0,
      "actualProduction": 24,
      "part_2055566_3rd": 9,
      "production": 24,
      "targetProduction": 400,
      "firstCycle": 0,
      "lastCycle": 0,
      "part_8PEE027000161N_2ND": 120,
      "avgCycleTime": "00:51:40",
      "productionTime": 1416,
      "idealTime": 24,
      "mhrLoss": 0
    }

我遇到的问题是，当有许多列时，表格变得不可读，并且它不适合页面。考虑到我有大量列，我正在寻找有关如何设置表格格式以使其更具可读性和紧凑性的指导。

javascript reactjs typescript jspdf-autotable

在 jsPDF 和 jspdf-autotable 中格式化具有多列的大表

Formatting a Large Table with Many Columns in jsPDF and jspdf-autotable

评论