标签：nameList 表格 前端 excel 表头 let nameStr keyList
纯前端将表格数据导出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);
标签：nameList,表格,前端,excel,表头,let,nameStr,keyList 来源： https://blog.csdn.net/zhangxxxq/article/details/120549784
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。