前言

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

使用方法

1、安裝依賴


npm install vue-json-excel

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


cnpm install vue-json-excel

2、在項目的入口文件(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)計列表">   導(dǎo)出Excel

3.1、模板中標簽屬性的說明

name=“用戶統(tǒng)計列表” --------------導(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è)置            '序號': 'type',            '姓名': 'userName',            '年齡': 'age',            '手機號': 'phone',            '注冊時間': '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"},               ]       }   }}

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

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

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

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


導(dǎo)出Excel導(dǎo)出Excel

如果表格中有數(shù)據(jù)的時候,點擊導(dǎo)出功能

打開下載的文件,你會發(fā)現(xiàn)在序號這一列是沒有的,你可用自己是用js給導(dǎo)出的json_data數(shù)據(jù)加一個屬性。

在給json_data數(shù)據(jù)賦值的時候，添加加一個type屬性,來顯示序號。


   for(let i in this.json_data){               this.json_data[i].type=parseInt(i)+1           }

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

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

總結(jié)

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

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

前言

使用方法

總結(jié)