前端导出excel表格

前言
近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能。以前下载功能都是调后台接口的，但是这个迭代，后台压力比较重，部分就交给了前端自己实现，下面就记录一下前端如何实现excel表格下载功能。

核心方法
原理：通过a标签实现，把要导出的数据用“
”和“,”拼接成一个字符串，然后把字符串放到href中

function exportCsv (obj) {
    let titleForKey = obj.titleForKey
    let data = obj.data
    let str = []
　　 //列标题，逗号隔开，每一个逗号隔开一个单元格
    str.push(obj.title.join(',') + '
')
    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(',') + '
')
    }
　　 // 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
})