1. 程式人生 > >前端json資料匯出表格xls或csv

前端json資料匯出表格xls或csv

今天遇到網頁裡需要匯出獲獎名單的情況,所以就研究了一下,發現有很多個版本,其中最常見的是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開啟會詢問

回答是也是可以正常開啟。其他瀏覽器還沒有測試…