一、生成的是.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))) }
