javascript - 如何使用 React 库将数据导出到 Excel

Question

我正在使用 react-html-to-excel将我的表格转换为 excel 但我想要的是不要将第一列导出到 excel 即第一列不应该导出到 excel 我已经阅读了 this library i am using 的文档但还没有找到任何东西

我的代码

 <div className="App">
      <ReactHTMLTableToExcel
        id="test-table-xls-button"
        className="download-table-xls-button"
        table="table-to-xls"
        filename="test"
        sheet="tablexls"
        buttonText="Download as XLS"
      />
      <table id="table-to-xls">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr>
              <td>{item.firstname}</td>
              <td>{item.lastname}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

Link of codesand box full code

如果这个库不支持它，那么我愿意使用任何其他做这些事情的库。

Answer 1

我可以提出以下两个模块，因为我已经在生产中成功使用它们(也使用自定义列):

react-data-export

react-csv

第三个，经过快速搜索，看起来很有希望(虽然我没有用过)

react-export-excel --> 确实如此不是 支持 typescript

您当前使用的库不支持删除excel文件中的列根据此 issue ，其中还提出了第四个选项:

react-csv-creator

编辑 : 好的，我创建了两个例子。
第一个可以找到 here并使用我的第二个建议， react-csv第二个是以下，它使用我的第三个建议， react-export-excel 第二次编辑 :我已经更新了这两个示例，现在的列是从您的对象结构中定义的，并且提出了两种删除不需要的列的方法(通过键值 firstname 或通过索引 - 第一种)。
请注意，如果对象的结构在您的数据中是一致的(每个条目应具有相同的列)，上述方法将成功运行。
我在两个示例中使用的 camelCase 方法取自 here .

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactExport from "react-export-excel";
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;

function App () {
    
    const data = [
        { firstname: "jill", lastname: "smith", age: 22 },
        { firstname: "david", lastname: "warner", age: 23 },
        { firstname: "nick", lastname: "james", age: 26 }
    ];

    const camelCase = (str) =>  {
        return str.substring(0, 1).toUpperCase() + str.substring(1);
    };

    const filterColumns = (data) => {
        // Get column names
        const columns = Object.keys(data[0]);

        // Remove by key (firstname)
        const filterColsByKey = columns.filter(c => c !== 'firstname');

        // OR use the below line instead of the above if you want to filter by index
        // columns.shift()

        return filterColsByKey // OR return columns
    };

    return (
        <div className="App">
            <ExcelFile filename="test">
                <ExcelSheet data={data} name="Test">
                    {
                        filterColumns(data).map((col)=> {
                            return <ExcelColumn label={camelCase(col)} value={col}/>
                        })
                    }
                </ExcelSheet>
            </ExcelFile>
            <table id="table-to-xls">
                <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
                </thead>
                <tbody>
                {data.map(item => {
                    return (
                        <tr>
                            <td>{item.firstname}</td>
                            <td>{item.lastname}</td>
                            <td>{item.age}</td>
                        </tr>
                    );
                })}
                </tbody>
            </table>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);