原生js实现下载导出Excel
程序员文章站
2022-03-15 10:15:57
...
思路：获取数据、重构数据、导出表格，vue也可以使用，原理一样；
注：base64();方法不能忘
function getUserList(){
$.ajax({
url:"",
type:"",
data:{},
dataType:"json",
contentType:"application/json; charset=utf-8",
async:false,
success:function(request){
let arr = [];
for (let k = 0; k < request.data.length; k++) {
arr.push([ //将需要导出的数据重新构造新数组
request.data[k].name,
request.data[k].sex,
request.data[k].phone,
])
}
const jsonData = arr;
let str = "<tr><td>姓名</td><td>性别</td><td>电话</td></tr>";
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
if(jsonData[i][item] == null){
str+=`<td> </td>`;
}else{
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
}
str+='</tr>';
}
//Worksheet名
let worksheet = '列表'
let uri = 'data:application/vnd.ms-excel;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><!--[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)
}
});
}
function base64(){
return window.btoa(unescape(encodeURIComponent(s)))
}
上一篇： PHP会话控制中session的使用
下一篇： 创建简单的node服务器