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.js 嵌套循环、if判断、动态删除的实例
下面小编就为大家分享一篇vue.js 嵌套循环、if判断、动态删除的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
掌握Qwik.js，轻松应对前端SSR渲染问题
掌握Qwik.js,轻松应对前端SSR渲染问题！本指南将为你揭示如何使用这款强大的框架,让你在前端开发中游刃有余
2023-12-12
vue中的自定义属性并获得属性的值方式
这篇文章主要介绍了vue中的自定义属性并获得属性的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue Router组合布局用法详解
今天我们用一种新的布局方式，使用路由视图来实现布局样式，本文将给大家介绍如何使用Vue Router组合布局，文中有详细的代码示例供大家参考，感兴趣的同学可以跟着小编一起学习
2023-05-05
解决修复报错Error in render:TypeError:Cannot read&n
这篇文章主要介绍了解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue中的项目打包及部署全流程
这篇文章主要介绍了Vue中的项目打包及部署全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vite中使用Ant Design Vue3.x框架教程示例
这篇文章主要为大家介绍了Vite中使用Ant Design Vue3.x框架教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
vue+elementUI-el-table实现动态显示隐藏列方式
这篇文章主要介绍了vue+elementUI-el-table实现动态显示隐藏列方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue文件的组织结构不合理之优化项目结构详解
在这篇博客中,我们将探讨 Vue 文件组织结构不合理的几个常见问题,并提供解决方案,以帮助开发者创建更清晰、更高效的项目文件结构,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
Vue Element-ui实现树形控件节点添加图标详解
这篇文章主要为大家介绍了Element-ui实现树形控件节点添加图标，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11