一、生成的是.csv文件，伪装成Excel文件，很多情况打不开
public downloadExcel(){
let tableJson = [
{
name:'AML',
phone:'123456',
email:'123@123456.com'
},
{
name:'AML',
phone:'123456',
email:'123@123456.com'
},
{
name:'I3',
phone:'123456',
email:'123@123456.com'
},
{
name:'THEL',
phone:'123456',
email:'123@123456.com'
},
]
// 第一行是标题(表头)每一列用半角逗号隔开。
let csvStr:any = tableJson.map((item:any) => {
// 加\t是为了不让数字以科学计数法显示。
let valueList = Object.keys(item).map((key:any) => item[key])
return valueList.join(',\t')
})
csvStr = '姓名,电话,地址,\n' + csvStr.join(',\n')
// encodeURIComponent解决中文乱码。
const href = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(csvStr)
const aHtml = document.createElement('a')
aHtml.download = 'fe_table.xlsx' // 通过修改后缀名伪装成Excel
aHtml.href = href
aHtml.click()
}
二、生成Excel升级版，直接生成的是.xls
public downloadExcel(){
const jsonData:any = [
{
name:'AML',
phone:'123456',
email:'123@123456.com'
},
{
name:'AML',
phone:'123456',
email:'123@123456.com'
},
{
name:'I3',
phone:'123456',
email:'123@123456.com'
},
{
name:'THEL',
phone:'123456',
email:'123@123456.com'
},
]
//新方法
let str = '<tr><td>name</td><td>phone</td><td>email</td></tr>';
//循环遍历，每行加入tr标签，每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
//Worksheet名
let worksheet = 'Sheet1'
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><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 + this.base64(template)
}
public base64 (s:any) { return window.btoa(unescape(encodeURIComponent(s))) }
