纯前端将表格数据导出excel
导出xlsx格式的excel文件
方法封装
对表头及表格数据分别进行循环获取
/**
*
* @param jsonData 接口返回数据
* @param nameList 标题表头数据 （非必填）
* @param keyList 与表头相对应取值参数名 （非必填）
*/
export function downloadExcel(jsonData,nameList,keyList) {
let nameStr = '' //表头字段
if (nameList && nameList > 0) { //如果传了表头数据进来，代表不是所有的接口数据都倒出
nameList.forEach(name => {
nameStr += `<td>${name + '\t'}</td>`;
})
} else { //接口返回的所有字段都导出到excel内
Object.keys(jsonData).forEach(name => {
nameStr += `<td>${name + '\t'}</td>`;
})
}
let str = '<tr>'+nameStr+'</tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
str += '<tr>';
if (keyList && keyList.length > 0) { //与表头相对应，里面的值为相对应的参数
keyList.forEach(key=> {
str += `<td>${jsonData[i][key] + '\t'}</td>`;
})
} else {
jsonData[i].forEach(key => {
//增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${jsonData[i][key] + '\t'}</td>`;
})
}
str += '</tr>';
}
//Worksheet名
let worksheet = 'Sheet1'
//导出格式为xlsx
let uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,';
//下载的表格模板数据
let 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 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>`;
//下载模板
window.location.href = uri + base64(template)
}
方法调用
let nameList = ['名称','年龄','地址'];
let keyList = ['name', 'age', 'address'];
downloadExcel(this.listOfAllData,nameList,keyList);
导出csv格式的excel表格
方法封装
导出csv格式的数据后，文件修改后保存时会出现编码问题提示。
/**
* 列表数据导出
* @param dataStr 接口数据
* @param nameStr 表头用','隔开（非必填）
* @param keyList 与表头相对应，参数值（非必填）
*/
export function exportExcel(dataStr, nameStr,keyList) {
let listParamsClone = {};
let exportStr = '';
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
exportStr = `${nameStr}`;
//增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < dataStr.length; i++) {
if (keyList && keyList.length > 0) {
// 如果传入了表头，则需要根据传入的参数列表对应
keyList.forEach(element => {
exportStr += `${dataStr[i][element] + '\t'},`
});
} else {
for (let key in dataStr[i]) {
exportStr += `${dataStr[i][key] + '\t'},`
}
}
exportStr += '\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(exportStr);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
link.download = `下载.csv`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
方法调用
let nameStr = '名称,年龄，地址\n';
let keyList = ['name', 'age', 'address'];
exportExcel(this.listOfAllData,nameStr,keyList);