一般類似功能都會放到後端來做，當然作爲一項擴展技能，前端開發人員也應該掌握。
今天，給大家介紹前端實現excel表格下載的倆種方式
方式一、
const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小張',age:20}]
if (!jsonData.length) return
// 表格的列標題 如果出現科學技術法或者其他格式 使用 \t
let title = '序號,名稱,年齡\n'
jsonData.map(item => {
let key = {}
key['序號'] = item.order
key['名稱'] = item.name
key['年齡'] = item.age
for (let i in key){
title += `${key[i] + '\t'},`
}
title += '\n'
})
// encodeURIComponent 解決中文亂碼
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title)
// 創建a標籤
let link = document.createElement('a')
link.href = uri
link.download = `${new Date().toLocaleString()}_數據表_${jsonData.length}條.csv`
link.click()
效果圖：
雖然實現了我們的需求，但是表格看起來不夠美觀
方式二、
創建一個dom表格，可以添加樣式
<table id="table" style="position: fixed;left: -10000px;">
<tr>
<th>序號</th>
<th>名稱</th>
<th style="width:200px">年齡</th>
</tr>
<tr v-for="(item,index) in jsonData">
<td>{{item.order}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
獲取到表格節點，生成dom節點樹，生成blob對象
exportExcel() {
let oHtml = document.getElementById('table').outerHTML
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
table{
min-width: calc(100vw - 290px);
/*margin-top: 50px;*/
border-collapse: collapse;
border-spacing: 0;
border: 1px #eee solid;
border-radius: 50px;
}
table tr{
height:50px;
border: 1px #eee solid;
white-space: nowrap;
}
table tr th{
border: 1px #eee solid;
background-color: #e1f0fe;
}
table tr td{
border: 1px #eee solid;
white-space: nowrap;
padding: 30px 20px;
text-align: center;
}
</style>
</head>
<body>
${oHtml}
</body>
</html> `;
// 生成blob對象
let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
// 創建一個a標籤
let oA = document.createElement('a');
// 利用URL.createObjectURL()方法爲a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 給文件命名
oA.download = `${new Date().toLocaleString()}_提現數據表_${this.jsonData.length}條.xlsx`;
// 模擬點擊
oA.click();
},
效果圖：
可以看到我們的表格寬度是200，以及我們添加的背景邊框等額外樣式，完美實現。