不依賴第三方工具純前端生成EXCEL的解決方案

先說明一點本文所指的Excel實際上是csv，csv是以逗號分隔值，其文件以純文本形式存儲表格數據，能夠用Office或者WPS等其餘工具打開，也能夠把文件的後綴名csv改爲xlsx這樣它會更像是一個Excel。

一般來講生成Excel這個任務應該是後臺來負責的，可是在先後端分離的項目中若是基於前端生成Excel這樣就少了一次api請求，性能以及用戶體驗也會獲得必定的提高，固然這隻限於簡單的Excel，若是數據量巨大仍是採用前端生成的方案，這是不科學的，再或者說前端生成Excel比後臺生成更加靈活，好比說有這樣一個需求：讓用戶拖拽亦或者是勾選行列去生成指定內容的Excel，這種狀況下前端生成的優點就體現出來了。

生成Excel的功能有不少大神已經給出來完善且強大的解決方案好比 js-xlsx，但有的時候咱們的項目很小巧，引入一個js-xlsx的代碼體積甚至比咱們業務的代碼量還要大，這是沒有必要的。爲了解決這一弊端咱們來看怎麼用原生的方法生成一個簡單的Excel。

先了解一下csv的語法：

1. 開頭不留空，以行爲單位。
2. 可含或不含列名，含列名則居文件第一行。
3. 以半角逗號做分隔符，列爲空也要表達其存在。
4. 換行用回車符表示。
5. 特殊符號要轉義，好比用來換行的回車符要用\n表示。

咱們嘗試把下面基於csv語法的字符串渲染成表格：
'姓名,年齡,性別,\n小紅,12,男,\n小蘭,13,女'

根據上面的規則把須要輸出的成Excel的數據轉換成符合csv語法的字符串是很是簡單的，接下來看如何把這個字符串做爲csv文件保存到本地。

須要下載確定離不開a標籤的download屬性，能夠指定a標籤的download值爲name.xlsx這樣下載的文件就很是像是一個Excel了默認也是用Excel來打開的，接下來就只剩a標籤的href屬性須要處理了。

首先開頭要聲明data:text/csv表示是cvs文件，用\ufeff解決Excel打開中文亂碼的問題，csv字符串要通過encodeURIComponent()方法的處理，下面是完整代碼：

downloadExcel()
function downloadExcel(){
  let tableJson = [
    {name: '小紅', phone: '123456789', address: '和陽南路'},
    {name: '小蘭', phone: '123456789', address: '和陽北路'},
    {name: '小光', phone: '123456789', address: '和陽西路'},
    {name: '小明', phone: '123456789', address: '和陽東路'}
  ]
  // 第一行是標題(表頭)每一列用半角逗號隔開。
  let csvStr = tableJson.map(item => {
    // 加\t是爲了避免讓數字以科學計數法顯示。
    let valueList = Object.keys(item).map(key => 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()
}
複製代碼