大家好，欢迎来到IT知识分享网。
一、用 js-export-excel插件实现
首先，npm安装插件
npm install -save js-export-excel
代码实现：
1. 引入插件
2. 定义导出的模板（表头、数据等）
3. 定义导出的文件名
4. 导出成功
//1. 导入插件 import ExportJsonExcel from 'js-export-excel'; //2. 提取方法 / * 导出档案为excel文件 */ exportJsonExcel = () => { const { dataSource } = this.state; //3. 定义表头，数据 let option = {}, tableData = [], tableTitle; tableTitle = ['姓名', '性别', '天气', '温度(℃)', '时间']; if(!dataSource || dataSource.length === 0){ notification.open({ message: '没有可供导出的信息', placement: 'bottomRight', icon: <Icon type="exclamation-circle" /> }); return; } dataSource.map((item) => { let objRow = { '姓名': item.personName, '性别': item.sex, '天气': item.sun, '温度(℃)': item.temperature, '时间': item.date, }; tableData.push(objRow); }); //4.下载的表格文件名 option.fileName = '信息' + (new Date()).getTime(); option.datas = [ { sheetName: 'Report', //名字(可有可无)(默认 sheet1) sheetData: tableData, //数据源 sheetHeader: tableTitle, //表头数据 sheetFilter: tableTitle, //表头数据对应的sheetData数据 } ]; let toExcel = new ExportJsonExcel(option); toExcel.saveExcel(); } //页面显示 <Button style={
{ float: 'left' }} onClick={this.exportJsonExcel}>导出</Button>二、用原生js实现（没有插件）
将table标签，包括tr、td等对json数据进行拼接，通过将json遍历将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html
代码实现：
1. 拼接json数据
2. 定义excel模板
3. 通过创建标签a实现（document）
const jsonData = JSON.parse(JSON.stringify(data)); //data=[{},{},{}] 接口给的数据
// 列标题
let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
// 循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(const key in jsonData[i]){
// 增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][key] + '\t'}</td>`;
}
str+='</tr>';
}
const worksheet = 'Sheet1'; // Worksheet名
const uri = 'data:application/vnd.ms-excel;base64,';
// 输出base64编码
const base64 = (s : any) => window.btoa(unescape(encodeURIComponent(s)));
// 下载的表格模板数据
const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Conten-Type" content="text/html;charset=utf-8">
<!--[if gte mso 9]>
<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>
</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>
<![endif]--></head>
<body><table>${str}</table></body>
</html>`;
const link = document.createElement("a");
link.href = uri + base64(template); //下载模板
link.download = "数据表.xls";
link.click();
};
//导出.csv文件 (和excel文件差不多，就是不需要模板文件)
// 列标题，逗号隔开，每一个逗号就是隔开一个单元格
// let str = `姓名,电话,邮箱\n`;
// for(let i = 0 ; i < jsonData.length ; i++ ){
// for(const key in jsonData[i]){
// str+=`${jsonData[i][key] + '\t'},`; // 增加\t为了不让表格显示科学计数法或者其他格式
// }
// str+='\n';
// }
// const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解决中文乱码
// const link = document.createElement("a"); // 通过创建a标签实现
// link.href = uri;
// link.download = "json数据表.csv";
// link.click();
官方文档： js-export-excel – npm
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/153809.html
