前端導出excel表格

前言
近期項目有個新需求--將折線圖表的數據加一個下載成excel表格的功能。以前下載功能都是調后台接口的，但是這個迭代，后台壓力比較重，部分就交給了前端自己實現，下面就記錄一下前端如何實現excel表格下載功能。

核心方法
原理：通過a標簽實現，把要導出的數據用“\n”和“,”拼接成一個字符串，然后把字符串放到href中

function exportCsv (obj) {
    let titleForKey = obj.titleForKey
    let data = obj.data
    let str = []
　　 //列標題，逗號隔開，每一個逗號隔開一個單元格
    str.push(obj.title.join(',') + '\n')
    for (let i = 0, dataLen = data.length; i < dataLen; i++) {
        let temp = []
        for (let j = 0, titleLen = titleForKey.length; j < titleLen; j++) {
            temp.push(data[i][titleForKey[j]])
        }
　　　　 //遍歷數據，將每行的數據逗號隔開，每一個逗號就是隔開一個單元格
        str.push(temp.join(',') + '\n')
    }
　　 // encodeURIComponent解決中文亂碼
    let url = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str.join(''))
    let downloadLink = document.createElement('a')
    downloadLink.href = url
　　 // 給文件命
    downloadLink.download = obj.fileName
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
}

調用如下：

this.exportCsv({
    fileName: '文件名.csv',
    title: this.tableTitle,
    titleForKey: this.tableTitleKey,
    data: this.tableData
})