React导出excle
导出excle
在React项目中导入excle,我们可以使用xlsx插件来实现
(1)下载插件
yarn add xlsx
(2)自定义hook函数
导入导出插件在项目中经常会用到,我们可以将这个功能封装为自定义hook,后续可以在任何一个页面或者组件中使用。
src/hooks/useExportExcle.js
import * as XLSX from "xlsx"
const useExportExcle = () => {
const handleExportAll = (header, dataSource,fileName) => {
const json = dataSource.map((item) => {
return Object.keys(item).reduce((dataSource, key) => {
const newKey = header[key] || key
dataSource[newKey] = item[key]
return dataSource
}, {})
});
const sheet = XLSX.utils.json_to_sheet(json);
openDownloadDialog(sheet2blob(sheet, undefined), `${fileName}.xlsx`);
}
const openDownloadDialog = (url, saveName) => {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
const sheet2blob = (sheet, sheetName) => {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
return {handleExportAll}
}
export default useExportExcle
需要注意的是,我们导出的自定义hook需要接受两个参数,一个导出数据的header,还有一个导出数据的dataSource
(3)组件中调用hook函数
import useExportExcle from '../../hooks/useExportExcle'
export default function Main() {
const [dataSource, setDataSource] = useState([
{ column_1: "bobo", column_2: "成都", column_3: "武侯区" }
])
const { handleExportAll } = useExportExcle()
const header = {
"column_1": "表头1",
"column_2": "表头2",
"column_3": "表头3"
}
const fileName = "文件名字"
return (
<Button onClick={()=>handleExportAll(header,dataSource,fileName)}>导出</Button>
)
}
点击按钮过后就能实现表格的导出功能
效果如下: