js 實現純前端將資料匯出excel兩種方式，親測有效
阿新 • • 發佈：2019-01-08
由於專案需要，需要在不呼叫後臺介面的情況下，將json資料匯出到excel表格，參考了好多資料以及很多大佬寫的部落格終於實現，相容chrome沒問題，其他還沒有測試過，這邊介紹兩種實現方式，並附上程式碼和gif動圖，博主不才還望輕噴
方法一
將table標籤，包括tr、td等對json資料進行拼接，將table輸出到表格上實現，這種方法的弊端在於輸出的是偽excel，雖說生成xls為字尾的檔案，但檔案形式上還是html，程式碼如下
<html>
<head>
<p style="font-size: 20px;color: red;">使用table標籤方式將json匯出xls檔案</p 如圖：
方法二
通過將json遍歷進行字串拼接，將字串輸出到csv檔案，輸出的檔案不會再是html型別的檔案而是真正的csv檔案，程式碼如下
<html>
<head>
<p style="font-size: 20px;color: red;">使用a標籤方式將json匯出csv檔案</p>
<button onclick='tableToExcel()'>匯出</button>
</head>
<body>
<script>
function tableToExcel(){
//要匯出的json資料
var jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'[email protected]'
},
{
name:'炮灰乙',
phone:'123456789',
email:'[email protected]'
},
{
name:'土匪丙',
phone:'123456789',
email:'[email protected]'
},
{
name:'流氓丁',
phone:'123456789',
email:'[email protected]'
},
]
//列標題，逗號隔開，每一個逗號就是隔開一個單元格
let str = `姓名,電話,郵箱\n`;
//增加\t為了不讓表格顯示科學計數法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解決中文亂碼
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通過建立a標籤實現
var link = document.createElement("a");
link.href = uri;
//對下載的檔案命名
link.download = "json資料表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>如圖：
參考了很多大佬的部落格其中這兩篇對我啟發最大，感謝！
https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673