比如这样的一个表格，怎么通过button下载成excel，其实就是表格数据的一个运用哈~
1、首先准备数据(就用官网的吧)：
interface tData {
key: string;
name: string;
age: number;
address: string;
tags: string[];
}
const tableData: Array<tData> = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], },];
2、准备一个页面的Button
<Button type="primary" onClick={exportData} style={{margin: 20}}>导出数据</Button>
3、对data数据做些处理
install下xlsx
npm install xlsx
最开始引入下xlsx
import XLSX from 'xlsx';
exportData函数
function exportData() {
// 第一行各单元格标题
const entozh: any = {
name:"Name",
age:"Age",
address:"Address"
};
// 需要处理的数据
const nowdata: Array<tData> = tableData;
const json = nowdata.map((item: any) => {
return Object.keys(item).reduce((newData: any, key: string) => {
const newKey = entozh[key] || key;
newData[newKey] = item[key];
return newData
}, {})
});
// XLSX.utils.json_to_sheet(json) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表，默认的列顺序由使用Object.keys的字段的第一次出现确定
const sheet = XLSX.utils.json_to_sheet(json);
openDownloadDialog(sheet2blob(sheet,undefined), `导出数据.xlsx`);
}
sheet2blob函数
function sheet2blob(sheet: any, sheetName: any) {
sheetName = sheetName || 'sheet1';
const workbook: any = {
SheetNames: [sheetName],
Sheets: {}
};
// 生成excel的配置项，将数据放入对象workbook的Sheets中等待输出
workbook.Sheets[sheetName] = sheet;
const wopts: any = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
function s2ab(s: any) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; i += 1) view[i] = s.charCodeAt(i) & 0xFF; return buf;
}
const wbout = XLSX.write(workbook, wopts);
// 字符串转ArrayBuffer
const blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
return blob;
}
openDownloadDialog函数
function openDownloadDialog(url: any, saveName: string) {
if (typeof url === 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
const aLink: HTMLAnchorElement = document.createElement('a');
aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
let 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);
}
点击
就可以了
