Vue純前端如何實現(xiàn)導出簡單Excel表格的功能

更新時間：2025年01月09日 11:07:43 作者：gardeniahui

這篇文章主要介紹了如何在Vue項目中使用vue-json-excel插件實現(xiàn)Excel表格的導出功能,包括安裝依賴、引入插件、使用組件、設置表頭和數(shù)據(jù)、處理空數(shù)據(jù)情況、源代碼修改以解決常見問題,需要的朋友可以參考下

前言

在許多的后臺系統(tǒng)中少不了導出Excel表格的功能，在項目中純前端使用vue-json-excel插件來實現(xiàn)簡單Excel表格的導出功能。

使用方法

1、安裝依賴

npm install vue-json-excel -S

也可以使用淘寶鏡像倉庫，安裝速度更快，推薦使用

npm install vue-json-excel --registry=http://registry.npm.taobao.org

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

模板中標簽屬性的說明

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

4、Excel表格表頭的設置

json_fields: {  //導出Excel表格的表頭設置
        '序號': 'type',
        '姓名': 'userName',
        '年齡': 'age',
        '手機號': 'phone',
        '注冊時間': '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ù)的時候,不顯示導出按鈕以及表格

<download-excel v-if="json_data.length >= 0"
                class="el-button"
                :data="json_data"
                :fields="json_fields"
                worksheet = "My Worksheet"
                name ="用戶信息列表">
  導出Excel
</download-excel>

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

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

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

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 ="用戶信息列表">
          導出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="序號"
        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="手機號">
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="注冊時間">
      </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插件導出Excel',
      json_fields: {  //導出Excel表格的表頭設置
        '序號': 'type',
        '姓名': 'userName',
        '年齡': 'age',
        '手機號': 'phone',
        '注冊時間': '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>