前端json資料匯出表格xls或csv
阿新 • • 發佈:2018-12-24
今天遇到網頁裡需要匯出獲獎名單的情況,所以就研究了一下,發現有很多個版本,其中最常見的是json遍歷得到字串,然後建立a連結進行下載
<html> <head> <meta charset="utf-8"> <title>匯出表格</title> </head> <body> <script> function tableToExcel(){ //要匯出的json資料 var jsonData = [ { name:'noe', phone:'17865327942', email:'
[email protected]' }, { name:'天諾', phone:'110', email:'[email protected]' }, { name:'通旺', phone:'119', email:'[email protected]' }, { name:'yry', phone:'00000', email:'無' }, ] //列標題,逗號隔開,每一個逗號就是隔開一個單元格 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>
經過我的測試,在谷歌瀏覽器下下載.csv檔案完全沒有問題,但如果將最後改為link.download= ‘json資料表.xls’,也可以照常下載,但是用Excel開啟會詢問
回答是也是可以正常開啟。其他瀏覽器還沒有測試…