參考文章：https://segmentfault.com/a/1190000011057149#articleHeader2? ?感謝作者！??！
最近在做vue項(xiàng)目的時(shí)候碰到了一個(gè)需求，就是點(diǎn)擊table中某個(gè)td請求后端數(shù)據(jù)，返回的數(shù)據(jù)需要保存成excel表格形式下載下來，我就分享一下我實(shí)現(xiàn)這個(gè)需求的過程。
1. 安裝插件：npm install xlsx --save （插件地址：https://github.com/stardew516/xlsxDwonload）；
2. 點(diǎn)擊事件編寫,如：
download: function() {
? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let rs = res.data.data? //res.data.data 是后端返回的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let data = [{}]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let k in rs[0]) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[0][k] = k
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data = data.concat(rs)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.downloadExl(data, '數(shù)據(jù)')
}
// 將指定的自然數(shù)轉(zhuǎn)換為26進(jìn)制表示。映射關(guān)系：[0-25] -> [A-Z]。
getCharCol: function (n) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let s = ''
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let m = 0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? while (n > 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? m = n % 26 + 1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? s = String.fromCharCode(m + 64) + s
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? n = (n - m) / 26
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return s
},? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
// 字符串轉(zhuǎn)字符流
s2ab: function (s) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var buf = new ArrayBuffer(s.length)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var view = new Uint8Array(buf)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i !== s.length; ++i) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? view[i] = s.charCodeAt(i) & 0xFF
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return buf
},? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
//導(dǎo)出到excel
downloadExl: function (json, downName, type) {?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let keyMap = [] // 獲取鍵
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let k in json[0]) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keyMap.push(k)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let tmpdata = [] // 用來保存轉(zhuǎn)換好的json
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v: v[k],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tmpdata[v.position] = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v: v.v
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let outputPos = Object.keys(tmpdata)? // 設(shè)置區(qū)域,比如表格從A1到D10
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let tmpWB = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? SheetNames: ['mySheet'], // 保存的表標(biāo)題
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Sheets: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'mySheet': Object.assign({},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tmpdata, // 內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 設(shè)置填充區(qū)域
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 這里的數(shù)據(jù)是用來定義導(dǎo)出的格式類型
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ))], {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: ''
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })? // 創(chuàng)建二進(jìn)制對象寫入轉(zhuǎn)換好的字節(jié)流
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var href = URL.createObjectURL(tmpDown)? // 創(chuàng)建對象超鏈接
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.outFile.download = downName + '.xlsx'? // 下載名稱
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.outFile.href = href? // 綁定a標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.outFile.click()? // 模擬點(diǎn)擊實(shí)現(xiàn)下載
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setTimeout(function () {? // 延時(shí)釋放
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()來釋放這個(gè)object URL
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, 100)
},?
3. 注意事項(xiàng):
? ? 3.1: 需要在data()里面定義好接受的變量如：
? ? 3.2: 需要在mounted里面寫：
4.遇到的問題：
? ? 我開始能夠正常導(dǎo)出數(shù)據(jù)到excel，但是一下下載了100多個(gè)，導(dǎo)致瀏覽器崩掉了，后來查看原因才知道我把ID和點(diǎn)擊事件放在了一個(gè)標(biāo)簽里面，產(chǎn)生了死循環(huán)，后來改寫成第一張圖格式成功下載一次，特在此記錄。
