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

ops/2024/12/17 19:55:54/

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"borderstyle="width: 100%"><el-table-columnprop="type"label="序号"align="center"width="180"></el-table-column><el-table-columnprop="userName"label="姓名"align="center"width="180"></el-table-column><el-table-columnprop="age"align="center"label="年龄"></el-table-column><el-table-columnprop="phone"align="center"label="手机号"></el-table-column><el-table-columnprop="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"


http://www.ppmy.cn/ops/142721.html

相关文章

Python大数据可视化:基于Python的王者荣耀战队的数据分析系统设计与实现_flask+hadoop+spider

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 比赛信息管理 看板展示 系统管理 摘要 本文使用Python与…

【AI图像生成网站Golang】项目架构

AI图像生成网站 目录 一、项目介绍 二、雪花算法 三、JWT认证与令牌桶算法 四、项目架构 五、图床上传与图像生成API搭建 六、项目测试与调试(等待更新) 四、项目架构 本项目的后端基于Golang和Gin框架开发&#xff0c;主要包括的模块有&#xff1a; backend/ ├── …

Apache Seatunnel Web 使用指南

Apache Seatunnel Web 使用指南 项目地址:https://gitcode.com/gh_mirrors/sea/seatunnel-web 项目介绍 Apache Seatunnel Web 是一个强大的数据集成平台&#xff0c;旨在简化数据管道的构建和管理过程。它基于著名的 Apache Seatunnel&#xff08;原名 Flatten&#xff09;…

使用matlab对矩阵进行分块

1. 前言 由于matlab内存限制&#xff0c;导致无法处理较大尺寸的矩阵&#xff1b; 2. 解决思路 读取原始大尺寸矩阵&#xff0c;分块后处理&#xff0c;及时删除中间过程文件&#xff0c;只保留分块处理后的最终结果&#xff0c;最后合并结果文件&#xff0c;减少内存占用。 …

网络安全实施方案

网络安全实施方案 一、深彻了解现有网络资源 网络安全就是软件一样牵一发动全身&#xff0c;网络安全第一步是是整理出网络目前所有运行设备的型号、硬件版本、软件版本、补丁情况等。对现有的交换机、路由器、服务器等设备在现有的资源做好完全完善工作。 1.1网络交换、路由…

iOS渲染概述

App图形图像的渲染流程 我们在使用UIVIew&#xff0c;Image等组件的时候&#xff0c;是怎么一步步渲染到屏幕上的呢&#xff1f;动画又是怎么实现的&#xff1f; 这里我们先了解几个概念&#xff1a; 1.CPU&#xff1a;CPU主要负责的是逻辑运算&#xff0c;如图像的布局&…

android 控制主板串口

import com.fazecast.jSerialComm.SerialPort; import java.nio.charset.StandardCharsets; public class SendAndReceiveFromAllPorts { public static void main(String[] args) { SerialPort[] ports SerialPort.getCommPorts(); // 统一的发送指令&#xff08;16 进制&…

【从零开始入门unity游戏开发之——C#篇03】变量和常量

文章目录 一、变量1、什么是变量&#xff1f;2、申明变量的固定写法3、变量的类型值和引用类型的区别无符号和有符号位——表示变量所占用的内存空间的大小范围——表示变量的取值范围取值范围和存储单位的关系为什么byte的范围是 0 到 255&#xff1f;为什么 sbyte 的范围是 -…