下載本地的 excel 是前端應(yīng)用中經(jīng)常遇到的需求之一，本文以 Vue 為例，介紹如何在 Vue 中實(shí)現(xiàn)下載本地 excel。

首先，我們需要安裝一個(gè)依賴庫，名為

FileSaver

。它可以幫助我們觸發(fā)文件下載，需要使用 npm 進(jìn)行安裝。

npm install file-saver --save

然后，在我們需要下載 excel 文件的組件中引入

FileSaver

庫，并定義一個(gè)下載方法。

import { saveAs } from 'file-saver'
export default {
methods: {
downloadExcel() {
// 下載文件代碼
}
}
}

接下來，我們需要定義 excel 數(shù)據(jù)并對其進(jìn)行處理。在

downloadExcel

方法中先構(gòu)造要下載的數(shù)據(jù)，然后使用

Blob

構(gòu)造一個(gè)二進(jìn)制數(shù)據(jù)，最后使用

FileSaver

的

saveAs

方法觸發(fā)下載。

downloadExcel() {
const data = [
['姓名', '性別', '年齡'],
['張三', '男', 18],
['李四', '女', 20],
['王五', '男', 22]
]
const sheetName = '測試表格'
const worksheet = XLSX.utils.aoa_to_sheet(data)
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })
const fileName = `${sheetName}.xlsx`
const blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"})
saveAs(blob, fileName)
}

注意，由于使用到了

XLSX

庫，在組件中需要引入這個(gè)庫。

import XLSX from 'xlsx'

最后，還需要定義一個(gè)輔助函數(shù)

s2ab

。這個(gè)函數(shù)將字符串轉(zhuǎn)換成 ArrayBuffer，將在前面的代碼中使用。代碼如下：

s2ab(s) {
const buf = new ArrayBuffer(s.length)
const view = new Uint8Array(buf)
for (let i = 0; i< s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF
}
return buf
}

以上就是 Vue 中下載本地 excel 的全部內(nèi)容。整個(gè)過程還是比較簡單的，只需要引入庫和對數(shù)據(jù)進(jìn)行處理即可，值得注意的是定義的

downloadExcel

方法需要在模板中綁定到某個(gè)按鈕事件上。另外，本文中的代碼示例就是一個(gè)簡單的示例，實(shí)際使用中可能需要更多的數(shù)據(jù)處理代碼和界面代碼。