Vue純前端如何實(shí)現(xiàn)導(dǎo)出簡(jiǎn)單Excel表格的功能
前言
在許多的后臺(tái)系統(tǒng)中少不了導(dǎo)出Excel表格的功能，在項(xiàng)目中純前端使用vue-json-excel插件來實(shí)現(xiàn)簡(jiǎn)單Excel表格的導(dǎo)出功能。
使用方法
1、安裝依賴
npm install vue-json-excel -S
也可以使用淘寶鏡像倉庫，安裝速度更快，推薦使用
npm install vue-json-excel --registry=http://registry.npm.taobao.org
2、在項(xiàng)目的入口文件(main.js)中引入
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)3、在組件中使用
<download-excel
:data = "json_data"
:fields = "json_fields"
name = "用戶統(tǒng)計(jì)列表">
導(dǎo)出Excel
</download-excel>模板中標(biāo)簽屬性的說明
name="用戶統(tǒng)計(jì)列表" --------------導(dǎo)出Excel文件的文件名
:fields = "json_fields" ----------------Excel中表頭的名稱
:data = "json_data" -------------------導(dǎo)出的數(shù)據(jù)
4、Excel表格表頭的設(shè)置
json_fields: { //導(dǎo)出Excel表格的表頭設(shè)置
'序號(hào)': 'type',
'姓名': 'userName',
'年齡': 'age',
'手機(jī)號(hào)': 'phone',
'注冊(cè)時(shí)間': 'createTime',
},5、Excel表格中的數(shù)據(jù)
json_data:[
{"userName":"張三","age":18,"phone":15612345612,"createTime":"2019-10-22"},
{"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},
{"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},
{"userName":"趙六","age":18,"phone":15612345618,"createTime":"2019-10-15"},
]
也可以先做一下判斷，如果表中沒有數(shù)據(jù)的時(shí)候,不顯示導(dǎo)出按鈕以及表格
<download-excel v-if="json_data.length >= 0"
class="el-button"
:data="json_data"
:fields="json_fields"
worksheet = "My Worksheet"
name ="用戶信息列表">
導(dǎo)出Excel
</download-excel>如果表格中有數(shù)據(jù)的時(shí)候,點(diǎn)擊導(dǎo)出功能
打開下載的文件,會(huì)發(fā)現(xiàn)在序號(hào)這一列是沒有的,可以自己給js導(dǎo)出的json_data數(shù)據(jù)加一個(gè)屬性。
在給json_data數(shù)據(jù)賦值的時(shí)候，添加加一個(gè)type屬性,來顯示序號(hào)。
for(let i in this.json_data){
this.json_data[i].type=parseInt(i)+1
}
6、源代碼
<template>
<div>
<el-row>
<el-col :span="6">
</el-col>
<el-col :span="12">
<h1>{{ msg }}</h1>
<download-excel v-if="json_data.length >= 0"
class="el-button"
:data="json_data"
:fields="json_fields"
worksheet = "My Worksheet"
name ="用戶信息列表">
導(dǎo)出Excel
</download-excel>
</el-col>
<el-col :span="6">
</el-col>
</el-row>
<el-table
:data="json_data"
border
style="width: 100%">
<el-table-column
prop="type"
label="序號(hào)"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="userName"
label="姓名"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="age"
align="center"
label="年齡">
</el-table-column>
<el-table-column
prop="phone"
align="center"
label="手機(jī)號(hào)">
</el-table-column>
<el-table-column
prop="createTime"
align="center"
label="注冊(cè)時(shí)間">
</el-table-column>
</el-table>
</div>
</template>
<script>
import JsonExcel from 'vue-json-excel'
export default {
name: 'HelloWorld',
components:{
'downloadExcel': JsonExcel
},
data () {
return {
msg: '使用vue-json-excel插件導(dǎo)出Excel',
json_fields: { //導(dǎo)出Excel表格的表頭設(shè)置
'序號(hào)': 'type',
'姓名': 'userName',
'年齡': 'age',
'手機(jī)號(hào)': 'phone',
'注冊(cè)時(shí)間': 'createTime',
},
json_data:[
{"userName":"張三","age":18,"phone":15612345612,"createTime":"2019-10-22"},
{"userName":"李四","age":17,"phone":15612345613,"createTime":"2019-10-23"},
{"userName":"王五","age":19,"phone":15612345615,"createTime":"2019-10-25"},
{"userName":"趙六","age":18,"phone":15612345618,"createTime":"2019-10-15"},
]
}
},
created() {
this.initList();
},
methods: {
initList(){
for(let i in this.json_data){
this.json_data[i].type=parseInt(i)+1
}
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button{
background-color: lightskyblue;
}
</style>常見的數(shù)據(jù)導(dǎo)出格式化的問題
在vue項(xiàng)目中使用vue-json-excel導(dǎo)出表格時(shí)，出現(xiàn)如下問題：
將要導(dǎo)出的數(shù)據(jù)中如果有較長(zhǎng)的數(shù)字字符串（如“2415746843132487”），導(dǎo)出excel之后，excel會(huì)自動(dòng)的將過長(zhǎng)的數(shù)字串轉(zhuǎn)換成科學(xué)計(jì)數(shù)法。
解決辦法：
修改vue-json-excel源碼，在td標(biāo)簽里添加 style="mso-number-format:'\@';" 就可以解決
解決后的效果：
想要表格中數(shù)據(jù)居中顯示,也可以改源碼，在tr標(biāo)簽添加 align="center"
總結(jié)
到此這篇關(guān)于Vue純前端如何實(shí)現(xiàn)導(dǎo)出簡(jiǎn)單Excel表格功能的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出Excel表格功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue項(xiàng)目報(bào)錯(cuò):parseComponent問題及解決
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò):parseComponent問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了vue3自定義插件的作用場(chǎng)景及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了MVVM 框架解析之雙向綁定,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
我們?cè)谇岸碎_發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
Vue中如何對(duì)ElementUI的Dialog組件封裝
這篇文章主要介紹了Vue中如何對(duì)ElementUI的Dialog組件封裝問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03