我可以提出以下两个module,因为我已经在生产中成功使用了它们(还有自定义列):
- react数据导出
- react-csv
第三个,快速搜索后,看起来很有希望(虽然我没有使用过)
- react过来,出口的Excel - >它不支持typescript
您目前使用的库不支持根据this issue去除excel文件中的列,也提出了第四种方案:
- 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);