前言

在許多的后臺(tái)系統(tǒng)中少不了導(dǎo)出Excel表格的功能，下面就是我在實(shí)際的項(xiàng)目中純前端使用vue-json-excel插件來實(shí)現(xiàn)簡單Excel表格的導(dǎo)出功能；如有描述不當(dāng)，歡迎指正，補(bǔ)充。

使用方法

1、安裝依賴


npm install vue-json-excel

也可以使用cnpm(淘寶鏡像),安裝速度更快,推薦使用


cnpm install vue-json-excel

2、在項(xiàng)目的入口文件(main.js)中引入


import Vue from 'vue'import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3、在模板中使用


    :data   = "json_data"    :fields = "json_fields"    name = "用戶統(tǒng)計(jì)列表">   導(dǎo)出Excel

3.1、模板中標(biāo)簽屬性的說明

name=“用戶統(tǒng)計(jì)列表” --------------導(dǎo)出Excel文件的文件名
:fields = “json_fields” ----------------Excel中表頭的名稱
:data = “json_data” -------------------導(dǎo)出的數(shù)據(jù)

4、Excel表格表頭的設(shè)置


export default{   data(){       return{          json_fields: {  //導(dǎo)出Excel表格的表頭設(shè)置            '序號(hào)': 'type',            '姓名': 'userName',            '年齡': 'age',            '手機(jī)號(hào)': 'phone',            '注冊(cè)時(shí)間': 'createTime',          },       }    } }

5、Excel表格中的數(shù)據(jù)


export default{   data(){       return{          json_data:[            {"userName":"張三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},            {"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},            {"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},            {"userName":"趙六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},               ]       }   }}

這是點(diǎn)擊查詢按鈕查詢出來的數(shù)據(jù):?

你也可以先做一下判斷，如果表中沒有數(shù)據(jù)的時(shí)候,點(diǎn)擊"導(dǎo)出Excel"按鈕時(shí)給個(gè)提示，"當(dāng)前無數(shù)據(jù)顯示，無法執(zhí)行導(dǎo)出功能,"或者直接就不顯示導(dǎo)出按鈕；

我這里是在HTML中寫了兩個(gè)導(dǎo)出的按鈕,如果沒有數(shù)據(jù)的時(shí)候就顯示第一個(gè),點(diǎn)擊的時(shí)候會(huì)有個(gè)提示。

HTML的內(nèi)容,通過isExport來判斷顯示哪一個(gè)(樣式就自己去寫了)


導(dǎo)出Excel導(dǎo)出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           }

如果里面的的時(shí)間字段精確到秒的話，可能導(dǎo)出來的數(shù)據(jù)不會(huì)那么精確,這時(shí)你可以通過改插件的源碼來解決; 參考連接。

還有就是想要表格中數(shù)據(jù)居中顯示,也可以改源碼;

總結(jié)

以上就是我在實(shí)際項(xiàng)目中導(dǎo)出Excel表格的方法，其實(shí)像這種導(dǎo)出簡單Excel表格的功能，并不需要后臺(tái)，前端就可已實(shí)現(xiàn)，如果還有其他好的方法可以一起分享學(xué)習(xí)。

vue中純前端實(shí)現(xiàn)導(dǎo)出簡單Excel表格的功能

前言

使用方法

總結(jié)