色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue實(shí)現(xiàn)excel下載

在前端開(kāi)發(fā)中,Excel是非常常見(jiàn)的數(shù)據(jù)報(bào)表展示方式。然而,傳統(tǒng)的Excel下載方式,需要使用后端提供的接口進(jìn)行下載,對(duì)于前端來(lái)說(shuō)比較麻煩。而Vue在這方面給了我們很大的便利,可以很方便地通過(guò)前端實(shí)現(xiàn)Excel下載的功能。

首先,在Vue中實(shí)現(xiàn)Excel下載功能需要引入一個(gè)庫(kù)——ExcelJS,這是一個(gè)支持現(xiàn)代瀏覽器,node和React Native的Excel操作庫(kù)。

npm install exceljs --save

安裝完后,可以在Vue組件中引入exceljs并使用它。

import ExcelJS from 'exceljs';
export default {
data() {
return {
header: [
{ header: 'Name', key: 'name', width: 20 },
{ header: 'Age', key: 'age', width: 10 },
{ header: 'Gender', key: 'gender', width: 10 }
],
data: [
{ name: 'Tom', age: 25, gender: 'Male' },
{ name: 'Lucy', age: 22, gender: 'Female' },
{ name: 'Jack', age: 30, gender: 'Male' }
]
}
},
methods: {
download() {
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('Sheet1');
sheet.columns = this.header;
sheet.addRows(this.data);
workbook.xlsx.writeBuffer().then(buffer =>{
this.saveAsExcel(buffer, 'demo.xlsx');
})
},
saveAsExcel(buffer, fileName) {
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob);
a.href = href;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(href);
}
}
}

以上代碼中的header數(shù)組,定義了Excel表格的列名;data數(shù)組則填充了Excel表格的數(shù)據(jù)。在download方法中,實(shí)例化ExcelJS工作簿,設(shè)置表格列和填充數(shù)據(jù),最后使用writeBuffer方法將Excel表格數(shù)據(jù)轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)。

saveAsExcel方法則是用于將Excel表格數(shù)據(jù)轉(zhuǎn)化為可下載的文件。在該方法中,使用Blob將數(shù)據(jù)轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)并設(shè)定文件類(lèi)型,然后創(chuàng)建一個(gè)a標(biāo)簽,設(shè)置href和download屬性,并模擬點(diǎn)擊以觸發(fā)下載事件,最后移除a標(biāo)簽并回收資源。

接著,在Vue組件中使用download方法進(jìn)行下載操作即可。

通過(guò)以上代碼,我們就可以非常方便地在Vue中實(shí)現(xiàn)Excel表格的下載功能了,不再需要依賴(lài)后端接口進(jìn)行實(shí)現(xiàn)了。