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

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.mzph.cn/pingmian/64293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.1 角度

一、源码 use crate::approxeq::ApproxEq; use crate::trig::Trig;use core::cmp::{Eq, PartialEq}; use core::hash::Hash; use core::iter::Sum; use core::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Neg, Rem, Sub, SubAssign};#[cfg(feature "bytemuc…

【深入理解Java线程池】

深入理解Java线程池 Java线程池是Java并发编程中的一个重要概念&#xff0c;它提供了一种管理和复用线程的机制&#xff0c;可以显著减少创建和销毁线程的开销&#xff0c;提高系统的响应速度和吞吐量。以下是对Java线程池的详细解析&#xff1a; 一、线程池的基本概念 线程…

KeyFormer:使用注意力分数压缩KV缓存

Keyformer: KV Cache Reduction through Key Tokens Selection for Efficient Generative Inference 202403&#xff0c;发表在Mlsys Introduction 优化KV cache的策略&#xff0c;主要是集中在系统级别的优化上&#xff0c;比如FlashAttention、PagedAttention&#xff0c;它…

Linux 权限管理实践:精确控制用户对 systemctl 和 journalctl 命令的使用

前言 在 Linux 系统管理中&#xff0c;精确控制用户对特定命令的访问权限是一项关键的安全实践。使用 systemctl 和 journalctl 命令时&#xff0c;不当的权限设置可能会导致不必要的风险。本篇博客将详细讨论如何通过 sudoers 文件和 Polkit 策略为不同用户配置 systemctl 和…

SSH连接成功,但VSCode连接不成功

环境 在实验室PC上连接服务器234 解决方案&#xff1a;在VSCode中重新添加远程主机 删除旧的VSCode Server 在远程主机上&#xff0c;VSCode会安装一个‘vscode-server’服务来支持远程开发&#xff0c;有时旧的‘vscode-server’文件可能会导致问题&#xff0c;删除旧的&am…

【Qt】qt安装

在工作一年之后&#xff0c;还是想做一个Qt的教程&#xff0c;遥想研一刚刚接触Qt&#xff0c;从0到1学习&#xff0c;没有什么参考书籍&#xff0c;网上的资料也不多&#xff0c;幸好Qt官方文档写得好&#xff0c;加上自己肯研究&#xff0c;才堪堪入门。 现在我想自己写一个…

Web开发 -前端部分-CSS

CSS CSS&#xff08;Cascading Style Sheet&#xff09;:层叠样式表&#xff0c;用于控制页面的样式&#xff08;表现&#xff09;。 一 基础知识 1 标题格式 标题格式一&#xff1a; 行内样式 <!DOCTYPE html> <html lang"en"><head><meta…

YOLOv8目标检测(六)_封装API接口

YOLOv8目标检测(一)_检测流程梳理&#xff1a;YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集&#xff1a;YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型&#xff1a;YOLOv8目标检测(三)_训…

MySQL函数—合计统计函数

在MySQL中&#xff0c;你可以使用合计统计函数来计算某个列的合计值、平均值、最大值、最小值等。这些合计统计函数包括SUM、AVG、MAX、MIN等。 下面是一些常用的合计统计函数的示例&#xff1a; SUM函数&#xff1a;用于计算某个列的合计值。 SELECT SUM(column_name) FROM…

51c视觉~YOLO~合集6~

我自己的原文哦~ https://blog.51cto.com/whaosoft/12830685 一、其他yolo 1.1 Spiking-YOLO​ 使用常规深度神经网络到脉冲神经网络转换方法应用于脉冲神经网络域时&#xff0c;性能下降的很多&#xff0c;深入分析后提出了可能的解释&#xff1a;一是来自逐层归一化的效率…

Unity3D 3D模型/动画数据压缩详解

前言 在Unity3D项目中&#xff0c;3D模型和动画数据通常占用大量内存和存储空间&#xff0c;有效的数据压缩技术对于提升游戏性能和加载速度至关重要。本文将详细介绍Unity3D中3D模型和动画数据的压缩技术&#xff0c;并提供相关的代码实现。 对惹&#xff0c;这里有一个游戏…

Elasticsearch Java Api Client中DSL语句的查询方法汇总(二)

接上一篇&#xff1a;《Elasticsearch Java Api Client中DSL语句的查询方法汇总》 说明&#xff1a;示例代码依赖的是co.elastic.clients:elasticsearch-java:8.16.1。 1、ScriptQuery方法 用途&#xff1a;它允许用户使用脚本&#xff08;通常是 Painless 脚本语言&#xf…

如何在 Ubuntu 22.04 上安装 Strapi CMS

简介 Strapi 是一个使用 JavaScript 构建的开源、无头内容管理系统 (CMS)。与其他无头 CMS 一样&#xff0c;Strapi 开箱即用不带前端。它使用 API 作为其前端&#xff0c;允许你使用流行的框架&#xff08;如 React 和 Next.js&#xff09;构建网站。Strapi 基于插件系统&…

数字IC后端零基础入门基础理论(Day1)

数字IC后端设计导入需要用到的input数据如下图所示。 数字后端零基础入门系列 | Innovus零基础LAB学习Day9 Netlist: 设计的Gate level&#xff08;门级&#xff09;网表。下图所示为一个计数器设计综合后的门级netlist。 从这个netlist中我们看到这个设计顶层的名字叫counte…

序列模型的使用示例

序列模型的使用示例 1 RNN原理1.1 序列模型的输入输出1.2 循环神经网络&#xff08;RNN&#xff09;1.3 RNN的公式表示2 数据的尺寸 3 PyTorch中查看RNN的参数4 PyTorch中实现RNN&#xff08;1&#xff09;RNN实例化&#xff08;2&#xff09;forward函数&#xff08;3&#xf…

如何评估呼叫中心大模型呼出机器人的使用效果?

如何评估呼叫中心大模型呼出机器人的使用效果&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 评估呼叫中心大模型呼出机器人的使用效果是一个复杂而多维的过程&#xff0c;需要综合考虑多个方面&…

WSL2内部的Ubuntu怎么设置网络内桥接模式,弄了好久老是不成功,怎么办?

环境: Win10专业版 WSL2 Ubuntu22.04 问题描述: WSL2内部的Ubuntu怎么设置网络内桥接模式 解决方案: 方法一 1.控制面板开启,Hyper-V 管理器 2.重启电脑 3…创建外部虚拟交换机 打开 Hyper-V 管理器,在右侧操作面板中点击“虚拟交换机管理器”。 选择“创建虚…

redis集群 服务器更换ip,怎么办,怎么更换redis集群的ip

redis集群 服务器更换ip&#xff0c;怎么办&#xff0c;怎么更换redis集群的ip 1、安装redis三主三从集群2、正常状态的redis集群3、更改redis集群服务器的ip 重启服务器 集群会down4、更改redis集群服务器的ip 重启服务器 集群down的原因5、更改redis集群服务器的ip后&#xf…

记录学习《手动学习深度学习》这本书的笔记(五)

这一章是循环神经网络&#xff0c;太难了太难了&#xff0c;有很多卡壳的地方理解了好久&#xff0c;比如隐藏层和隐状态的区别、代码的含义&#xff08;为此专门另写了一篇【笔记】记录对自主实现一个神经网络的步骤的理解&#xff09;、梯度计算相关&#xff08;【笔记】记录…

人大金仓数据linux安装注意事项

人大金仓数据linux安装注意事项 本次是个人搭建虚拟机安装centos7的环境下进行安装。 1、安装流程参照https://help.kingbase.com.cn/v9/install-updata/install-linux/preface.html。 2、mount安装文件报错 操作手册提供mount的命令如下&#xff1a; mount KingbaseES_V009R0…