如何使用React库将数据导出到excel [英] How to export data to excel using react libraries

问题描述

我正在使用 react-html-to-excel 将表转换为excel，但我要的是不要将第一列导出到excel，即第一列不应导出到excel我已经查看过我正在使用的该库的文档，但是没发现任何东西

I am using react-html-to-excel to convert my table to excel but what I want is to not to export the first column to excel i.e the first column should not exported to excel i have gone through the documentation of this library i am using but haven't found any thing

我的代码

 <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>

链接代码和完整的代码框

如果该库中不支持该库，那么我可以使用任何其他具有此类功能的库.

If it is not supported in this library then I am open to use any other library which do these kind of stuff.

推荐答案

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

I can propose the following two modules since I have already used them successfully in production (with custom columns also):

1. 反应数据导出
2. react-csv

在快速搜索之后，第三个看起来很有希望(尽管我没有使用过)

And a third one, after a quick search, which looks promising (I haven't used it though)

1. react-export-excel

根据此 issue ，它还提出了第四个选择:

The library that you are currently using does not support the removal of columns in the excel file according to this issue, which also proposes a fourth option:

1. react-csv-creator

编辑:好的，我创建了两个示例.可以找到第一个

EDIT: Ok, I have created two examples. The first can be found here and uses my 2^nd proposal, react-csv

第二个是以下内容，它使用了我的3 ^rd 提案 react-export-excel

The second is the following, which uses my 3^rd proposal, react-export-excel

2 ^nd 编辑:我已经更新了两个示例，现在从对象的结构中定义了列，并提出了两种删除不需要的列的方法(按键)-value firstname 或按索引-1 ^st 一个).

2^nd EDIT: I have updated both examples, the columns now are defined from your object's structure, and two ways of removing the unwanted column are proposed (by key-value firstname or by index - the 1^st one).

请注意，如果数据中对象的结构一致(每个条目应具有相同的列)，则上述方法将成功运行.

Please take into account that the above methods will work successfully if the objects' structure is consistent in your data (each entry should have the same columns).

我在两个示例中都使用过的camelCase方法来自

The camelCase method that I have used in both examples was taken from 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);

这篇关于如何使用React库将数据导出到excel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！