javascript - 生成的 Excel 中出现额外的行

Question

我正在使用 npm 包 xlsx生成表内有表的 Excel 报告。一切工作正常，除了您可以在随附的屏幕截图中看到第 10 行与下面的所有表格相同。我确信我犯了一个 html 表错误，但两个小时后无法弄清楚错误到底是什么。我已附上屏幕截图和 html。

import React from 'react';

const Report = ({ data }) => {
  // console.log(data);
  return (
    <table>
      <tbody>
        <tr>
          <td style={{ width: '200px', backgroundColor: 'yellow' }}>
            Source Name:
          </td>
          <td>SOme cool report</td>
        </tr>
        <tr>
          <td>Report Name:</td>
          <td colSpan='6'>
            02 Dummy
          </td>
        </tr>
        <tr />
        <tr>
          <td>Data Write:</td>
          <td>Append to Previous Data</td>
        </tr>
        <tr>
          <td>Download Date:</td>
          <td>19/04/2021 13:16</td>
        </tr>
        <tr>
          <td>SR Id:</td>
          <td>99931</td>
        </tr>
        <tr>
          <td>Data Period:</td>
          <td> 2021/3</td>
        </tr>
        <tr>
          <td>Report Period: </td>
          <td>Monthly </td>
        </tr>
        <tr>
          <td>sdfasdfasdf:</td>
          <td>sdfsdf</td>
        </tr>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td></td>
                  <td colSpan='2'>Less than 1</td>
                  <td colSpan='2'>{'1-4'}</td>
                  <td colSpan='2'>{'5-9'}</td>
                  <td colSpan='2'>{'10-14'}</td>
                  <td colSpan='2'>{'15-19'}</td>
                  <td colSpan='2'>{'20-24'}</td>
                  <td colSpan='2'>{'25-44'}</td>
                  <td colSpan='2'>{'45-64'}</td>
                  <td colSpan='2'>{'65+'}</td>
                </tr>
                <tr>
                  <td>Dummy</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                  <td>Male</td> <td>Female</td>
                </tr>
                {Object.keys(data).map((d) => (
                  <tr>
                    <td>{d}</td>
                    <td>{data[d]?.abc?.male}</td>
                    <td>{data[d]?.abc?.female}</td>
                    <td>{data[d]?.cde1?.male}</td>{' '}
                    <td>{data[d]?.cde1?.female}</td>
                    <td>{data[d]?.cde2?.male}</td>{' '}
                    <td>{data[d]?.cde2?.female}</td>
                    <td>{data[d]?.cde3?.male}</td>
                    <td>{data[d]?.cde3?.female}</td>
                    <td>{data[d]?.abcd1?.male}</td>
                    <td>{data[d]?.abcd1?.female}</td>
                    <td>{data[d]?.abcd2?.male}</td>
                    <td>{data[d]?.abcd2?.female}</td>
                    <td>{data[d]?.ere1?.male}</td>
                    <td>{data[d]?.ere1?.female}</td>
                    <td>{data[d]?.ere2?.male}</td>
                    <td>{data[d]?.ere2?.female}</td>
                    <td>{data[d]?.ou?.male}</td>
                    <td>{data[d]?.ou?.female}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default Report;

Answer 1

嵌套表 HTML 结构导致整个表创建额外的行。

从代码中删除此行 - 这样就会删除添加到 Excel 工作表中的额外行。

    <table>
      <tbody>
        <tr>

来自您的代码。

在此处查看更正后的代码(由于方法不受支持，您无法在codesandbox上运行它 - 但代码可以在本地设置上运行)

https://codesandbox.io/s/extrarowexcelsheet-333cv?file=/src/App.js

import React from "react";
import XLSX from "xlsx";
import { useRef } from "react";


const Report = () => {
  // Data is just placeholder
  const [data, setData] = React.useState([["Hello"], ["Bye"]]);
  const myContainer = useRef(null);

  const exportFile = () => {
  
    const ws = XLSX.utils.table_to_sheet(myContainer.current);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    /* generate XLSX file and send to client */
    XLSX.writeFile(wb, "sheetjs.xlsx");
  };

  return (
    <div>
      <h2> This is Demo for StackOverFlow Issue #68269850</h2>
      <p> Extra row appearing in generated excel </p>
      <button
        style={{ backgroundColor: "#4CAF50", padding: "10px" }}
        onClick={exportFile}
      >
        Press Me to Generate Excel Sheet{" "}
      </button>

      <hr />

      <table ref={myContainer}>
        <tbody>
          <tr>
            <td style={{ width: "200px", backgroundColor: "yellow" }}>
              Source Name:
            </td>
            <td>SOme cool report</td>
          </tr>
          <tr>
            <td>Report Name:</td>
            <td colSpan="6">02 Dummy</td>
          </tr>
          <tr />
          <tr>
            <td>Data Write:</td>
            <td>Append to Previous Data</td>
          </tr>
          <tr>
            <td>Download Date:</td>
            <td>19/04/2021 13:16</td>
          </tr>
          <tr>
            <td>SR Id:</td>
            <td>99931</td>
          </tr>
          <tr>
            <td>Data Period:</td>
            <td> 2021/3</td>
          </tr>
          <tr>
            <td>Report Period: </td>
            <td>Monthly </td>
          </tr>
          <tr>
            <td>sdfasdfasdf:</td>
            <td>sdfsdf</td>
          </tr>

          <tr>
            <td></td>
            <td colSpan="2">Less than 1</td>
            <td colSpan="2">{"1-4"}</td>
            <td colSpan="2">{"5-9"}</td>
            <td colSpan="2">{"10-14"}</td>
            <td colSpan="2">{"15-19"}</td>
            <td colSpan="2">{"20-24"}</td>
            <td colSpan="2">{"25-44"}</td>
            <td colSpan="2">{"45-64"}</td>
            <td colSpan="2">{"65+"}</td>
          </tr>
          <tr>
            <td>Dummy</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
            <td>Male</td> <td>Female</td>
          </tr>
          {Object.keys(data).map((d) => (
            <tr>
              <td>{d}</td>
              <td>{data[d]?.abc?.male}</td>
              <td>{data[d]?.abc?.female}</td>
              <td>{data[d]?.cde1?.male}</td> <td>{data[d]?.cde1?.female}</td>
              <td>{data[d]?.cde2?.male}</td> <td>{data[d]?.cde2?.female}</td>
              <td>{data[d]?.cde3?.male}</td>
              <td>{data[d]?.cde3?.female}</td>
              <td>{data[d]?.abcd1?.male}</td>
              <td>{data[d]?.abcd1?.female}</td>
              <td>{data[d]?.abcd2?.male}</td>
              <td>{data[d]?.abcd2?.female}</td>
              <td>{data[d]?.ere1?.male}</td>
              <td>{data[d]?.ere1?.female}</td>
              <td>{data[d]?.ere2?.male}</td>
              <td>{data[d]?.ere2?.female}</td>
              <td>{data[d]?.ou?.male}</td>
              <td>{data[d]?.ou?.female}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Report;