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

更新时间：2025年01月09日 11:07:43 作者：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表格功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue深入理解之v-for中key的真正作用
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性,下面这篇文章主要给大家介绍了关于Vue深入理解之v-for中key的真正作用,需要的朋友可以参考下
2022-05-05
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
这篇文章主要介绍了js节流防抖应用场景,以及在vue中节流防抖的具体实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue项目报错:parseComponent问题及解决
这篇文章主要介绍了Vue项目报错:parseComponent问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue-cli3使用postcss-plugin-px2rem方式
这篇文章主要介绍了vue-cli3使用postcss-plugin-px2rem方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue3自定义插件的作用场景及使用示例详解
这篇文章主要为大家介绍了vue3自定义插件的作用场景及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
前端MVVM框架解析之双向绑定
这篇文章主要介绍了MVVM 框架解析之双向绑定,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue extend+promise封装全局弹窗组件
这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue2.x和Vue3.x的双向绑定原理详解
这篇文章主要给大家介绍了关于Vue2.x和Vue3.x的双向绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
:visible.sync 的作用详解
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧
2022-11-11
Vue中如何对ElementUI的Dialog组件封装
这篇文章主要介绍了Vue中如何对ElementUI的Dialog组件封装问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03