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

mepcadol  于 2023-05-16  发布在  Java
关注(0)|答案(3)|浏览(127)

我使用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
如果这个库不支持它,那么我可以使用任何其他做这类事情的库。

kqlmhetl

kqlmhetl1#

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

  1. react-data-export
  2. react-csv
    第三个,经过快速搜索,看起来很有希望(虽然我没有使用过)
  3. react-export-excel--> * 不支持TypeScript
    您当前使用的库不支持根据此issue删除excel文件中的列,该issue还提出了第四个选项:
  4. 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);
kjthegm6

kjthegm62#

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

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 project中检查它的工作情况。

khbbv19g

khbbv19g3#

使用xlsx
Yarn添加xlsx

import * as XLSX from 'xlsx';

const MYdata = [
  {"title":Title1, "website":"Foo"},
  {"title":Title2, "website":"Bar"}
]

const worksheet = XLSX.utils.json_to_sheet(MYdata);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "MYSavedData.xlsx");

根据他们的文档:默认情况下,它将为数组中的每个对象生成一个标题行和一个行。

相关问题