這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、匯出靜態資料
1、安裝 vue-json-excel
npm i vue-json-excel
注意，此插件對node有版本要求，安裝失敗檢查一下報錯是否由于node版本造成！
2、引入并注冊組件（以全域為例）
import Vue from "vue";
import JsonExcel from "vue-json-excel"; //引入excel插件
Vue.component("downloadExcel", JsonExcel);//注冊
3、使用
在template節點下使用download-excel標簽即可
<download-excel :data="https://www.cnblogs.com/smileZAZ/archive/2023/05/20/dataAttr" types="xls" :fields="fields" :name="exportName"
:worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="https://www.cnblogs.com/smileZAZ/archive/2023/05/20/exportDefaultValue">
<el-button type="success">匯出</el-button> //可以無需button
</download-excel>
在data節點下定義資料
dataAttr: [
{
id: 1,
name: '九轉大腸',
price: 999,
sellCount: 6,
rating: 100
}],
fields: { // 資料名稱及對應的值
編號: 'id',
名稱: 'name',
價格: 'price',
銷量: 'sellCount',
好評率: {
field: 'rating',
callback: value =https://www.cnblogs.com/smileZAZ/archive/2023/05/20/> `${value}%` // 以物件方式可以對資料做處理
}
},
exportName:'這是表格名稱',
exportSheet: '這是表格sheet的名稱',
exportHeader: '這是表格的標題',
exportFooter: '這是表格的頁腳',
exportDefaultValue: '這是一個默認的資料'
點擊匯出
二、匯出動態資料
如果需要在點擊按鈕前動態的獲取資料，則需要使用fetch屬性來指定一個引數，
注意，使用此引數時不能再系結data引數
以匯出一個外賣商品串列為例：
1、為fetch屬性系結了一個回呼，
<download-excel :fetch="getDataAttr" types="xls" :fields="fields" :name="exportName"
:worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="https://www.cnblogs.com/smileZAZ/archive/2023/05/20/exportDefaultValue">
<el-button type="success">匯出{{ exportName }}</el-button>
</download-excel>
2、在methods節點下定義方法
getDataAttr() {
const dataAttr = [] //定義匯出資料
this.goodsList.forEach((value) => { //進行資料處理
let dataAttrItem = new createExcleData(value.id, value.name, value.price, value.sellCount, value.rating)
//使用引入的createExcleData
dataAttr.push(dataAttrItem) //為匯出的資料陣列添加資料
})
return dataAttr //資料整理完畢
},
3、新建一個js檔案封裝一個類創建每條資料
export default class DataAttr {
constructor(id, name, price, sellCount, rating) {
this.id = id;
this.name = name,
this.price = price,
this.sellCount = sellCount,
this.rating = rating;
}
}
4、在組件下引入，然后就可以使用了
import createExcleData from '@/utils/createExcleData'
goodsList資料如下
點擊匯出，打開匯出檔案
本文轉載于:
https://juejin.cn/post/7204742703506522171
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552994.html
標籤：其他
上一篇：Echarts初學(一)
下一篇：返回列表