插件：使用vue-json-excel插件實(shí)現(xiàn)Vue純前端導(dǎo)出簡單的Excel表格功能。

使用方法

1. 安裝依賴

npm install vue-json-excel

2. 引入組件

a. 全局引入

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

b. 局部引入

import JsonExcel from "vue-json-excel";

components: {
    DownloadExcel: JsonExcel,
  },

3. 在模版中使用

<download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          header="患者列表"
          name="患者列表.xls"
        >
          導(dǎo)出
        </download-excel>

參數(shù)說明

name=“患者列表”. ------------------導(dǎo)出Excel文件的文件名
header="列表" ------------------ 這是個(gè)excel的頭部
:fields = “jsonFields” ------------------Excel中表頭的名稱（里面的屬性是excel表每一列的title,用多個(gè)詞組組成的屬性名(中間有空格的)要加雙引號; 指定接口的json內(nèi)某些數(shù)據(jù)下載,若不指定，默認(rèn)導(dǎo)出全部數(shù)據(jù)中心全部字段）
:data = “tableData”. -------------------導(dǎo)出的數(shù)據(jù)
type="xls" -------------------導(dǎo)出Excel的文件類型，默認(rèn)為xls

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

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

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

export default{
   data(){
       return{
          tableData:[
            {"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"},     
          ]
       }
   }
}

6. 導(dǎo)出Excel

image.png