react导出excel文件
时间: 2023-08-23 21:11:45 浏览: 50
在React中导出Excel文件有多种方法。引用\[1\]中的代码展示了使用xlsx库导出Excel文件的方法。首先,需要安装xlsx库,可以使用命令`yarn add xlsx`进行安装。然后,可以使用以下代码来导出Excel文件:
```javascript
import XLSX from "xlsx";
export const exportExcel = (id, name) => {
var exportFileContent = document.getElementById(id).cloneNode(true);
var wb = XLSX.utils.table_to_book(exportFileContent, { sheet: "sheet1" });
XLSX.writeFile(wb, name);
}
```
其中,`id`参数是要导出的表格的id,`name`参数是导出的Excel文件的名称。通过调用`exportExcel`函数,可以将指定的表格导出为Excel文件。
另外,引用\[2\]中的代码展示了使用原生JS导出Excel文件的方法。可以使用以下代码来实现:
```javascript
export const jsToExcel = (id, name) => {
var exportFileContent = document.getElementById(id).outerHTML;
var blob = new Blob(\[exportFileContent\], { type: "text/plain;charset=utf-8" });
blob = new Blob(\[String.fromCharCode(0xFEFF), blob\], { type: blob.type });
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.download = name;
a.href = link;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
```
同样,`id`参数是要导出的表格的id,`name`参数是导出的Excel文件的名称。通过调用`jsToExcel`函数,可以将指定的表格导出为Excel文件。
最后,可以在React组件中使用以上方法来导出Excel文件。例如,可以在一个按钮的点击事件中调用导出函数,如下所示:
```jsx
<div onClick={() => exportExcel('table_report', '现券交易异常日报.xlsx')}>导出</div>
```
其中,`table_report`是要导出的表格的id,`现券交易异常日报.xlsx`是导出的Excel文件的名称。
希望以上信息对您有所帮助!
#### 引用[.reference_title]
- *1* *2* *3* [react 导出excel文件的几种方式](https://blog.csdn.net/xJ_fang/article/details/122341761)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]