第三方插件選擇——vue-json-excel
- 安裝vue-json-excel
npm install vue-json-excel
# or
cnpm install vue-json-excel//速度更加快
2.作為組件導(dǎo)入vue
一般在main.js中導(dǎo)入注冊(cè)進(jìn)行全局使用
// vue-json-excel插件來(lái)實(shí)現(xiàn)簡(jiǎn)單Excel表格的導(dǎo)出功能
import JsonExcel from 'vue-json-excel'
// 將Excel導(dǎo)出器作為vue實(shí)例的組件
Vue.component('downloadExcel', JsonExcel)
- 使用
<download-excel
:data="voteDataList"
:fields="json_fields"
name="投票數(shù)據(jù)統(tǒng)計(jì)列表"
class="output-excel">
導(dǎo)出數(shù)據(jù)</download-excel >
//data：數(shù)據(jù)源
//name:導(dǎo)出Excel文件名
//fields：Excel中表頭的名稱(chēng)
json_fields: {
序號(hào): 'serialId',
標(biāo)題: 'voteTitle',
發(fā)布時(shí)間: 'publishDate'
}
image.png
image.png
