vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue导出Excel表格功能

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

作者:gardeniahui

这篇文章主要介绍了如何在Vue项目中使用vue-json-excel插件实现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>

常见的数据导出格式化的问题

在vue项目中使用vue-json-excel导出表格时,出现如下问题:

将要导出的数据中如果有较长的数字字符串(如“2415746843132487”),导出excel之后,excel会自动的将过长的数字串转换成科学计数法。

解决办法:

修改vue-json-excel源码,在td标签里添加 style="mso-number-format:'\@';" 就可以解决

解决后的效果:

想要表格中数据居中显示,也可以改源码,在tr标签添加 align="center"

总结 

到此这篇关于Vue纯前端如何实现导出简单Excel表格功能的文章就介绍到这了,更多相关Vue导出Excel表格功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文