如何使用react库将数据导出到 excel

IT技术 javascript excel reactjs
2021-05-13 18:33:55

我正在使用react-html-to-excel将我的表转换为 excel 但我想要的是不要将第一列导出到 excel 即第一列不应导出到 excel 我已经阅读了我正在使用这个库的文档但没有找到任何事物

我的代码

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

代码链接和框完整代码

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

2个回答

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

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

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

  1. react过来,出口的Excel - >支持typescript

您目前使用的库不支持根据this issue去除excel文件中的列,也提出了第四种方案:

  1. react-csv-创建者

编辑:好的,我创建了两个示例。第一个可以在这里找到并使用我的第二个建议,react-csv

第二个是以下,它使用了我的第三个建议,react-export-excel

2编辑:我已(通过键-值更新这两个例子中,现在是从您的对象的结构定义的列,并除去不需要的列的两种方式提出firstname- 1或由索引ST之一)。

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

我在这两个示例中使用的驼峰命名法取自此处

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

您可以通过覆盖获取表格 HTML 以格式化 XLS 文档函数来创建一个简单的hack来操作表格 HTML 代码ReactHTMLTableToExcel.format

ReactHTMLTableToExcel.format = (s, c) => {
  // If there is a table in the data object
  if (c && c['table']) {
    // Get the table HTML
    const html = c.table;

    // Create a DOMParser object
    const parser = new DOMParser();

    // Parse the table HTML and create a text/html document
    const doc = parser.parseFromString(html, 'text/html');

    // Get all table rows
    const rows = doc.querySelectorAll('tr');

    // For each table row remove the first child (th or td)
    for (const row of rows) row.removeChild(row.firstChild);

    // Save the manipulated HTML table code
    c.table = doc.querySelector('table').outerHTML;
  }

  return s.replace(/{(\w+)}/g, (m, p) => c[p]);
};

您已经过滤了表格 HTML 并删除了第一列。

你可以在这个Stackblitz 项目中检查这个工作