Vue中纯前端实现导出简单Excel表格的功能

news2025/2/28 3:55:04

Vue 前端Excel导出

Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件)

前言

在许多的后台系统中少不了导出Excel表格的功能，在项目中纯前端使用vue-json-excel插件来实现简单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 = "用户统计列表">
   导出Excel
</download-excel>

模板中标签属性的说明

name="用户统计列表" --------------导出Excel文件的文件名
:fields = "json_fields" ----------------Excel中表头的名称
:data = "json_data" -------------------导出的数据

4、Excel表格表头的设置

json_fields: {  //导出Excel表格的表头设置
        '序号': 'type',
        '姓名': 'userName',
        '年龄': 'age',
        '手机号': 'phone',
        '注册时间': 'createTime',
      },

5、Excel表格中的数据

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"},
      ]

也可以先做一下判断，如果表中没有数据的时候,不显示导出按钮以及表格

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

如果表格中有数据的时候,点击导出功能

打开下载的文件,会发现在序号这一列是没有的,可以自己给js导出的json_data数据加一个属性。

在给json_data数据赋值的时候，添加加一个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>