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,一经查实,立即删除!

相关文章

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目标检测(三)_训…

51c视觉~YOLO~合集6~

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

如何在 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…

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…

【GIS教程】使用GDAL-Python将tif转为COG并在ArcGIS Js前端加载-附完整代码

目录 一、数据格式 二、COG特点 三、使用GDAL生成COG格式的数据 四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据 一、数据格式 COG&#xff08;Cloud optimized GeoTIFF&#xff09;是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上&#xff0c;可以代替geose…

探索智能时代:如何利用AI一键生成PPT改变演示文稿的制作方式

在这个科技飞速发展的时代&#xff0c;信息的传递方式发生了翻天覆地的变化。曾几何时&#xff0c;我们还在为制作PPT而熬夜&#xff0c;手动选择模板、调整布局&#xff0c;甚至为每一张幻灯片的内容苦思冥想。然而&#xff0c;随着人工智能技术的不断进步&#xff0c;制作PPT…

【LDAP】LDAP概念和原理介绍

目录 一、前言 二、什么是LDAP&#xff1f; 2.1 什么是目录服务&#xff1f; 2.2 LDAP的介绍 2.3 为什么要使用LDAP 三、LDAP的主要产品线 四、LDAP的基本模型 4.1 目录树概念 4.2 LDAP常用关键字列表 4.3 objectClass介绍 五、JXplorer工具使用 一、前言 对于许多的…

nginx模板文件

nginx模板配置 背景模板文件nginx.conf容器验证 背景 nginx通过读取环境变量完成对nginx.conf的相关代理设置&#xff0c;但是nginx.conf不支持直接读取环境变量、所以使用nginx的模板功能达到相应目的 带有环境变量的 Nginx 配置文件模板。在 Docker 化部署 Nginx 时&#x…

善于运用指针(四)--指针数组和多重指针

一个数组的元素均为指针类型&#xff0c;称为指针数组。指针数组中的每一个元素应都有地址&#xff0c;相当于一个变量。 文章目录 前言 一、指针数组的定义 二、指向指针数组的指针变量 1.指针数组 2.多重指针 三、main函数的参数 1.argc argv envp 总结 前言 主要是指针数组…

12篇--图像轮廓绘制与最小外接问题

何为轮廓&#xff1f; 轮廓是一系列相连的点组成的曲线&#xff0c;代表了物体的基本外形。与边缘有什么区别与联系呢&#xff1f; 相对于边缘&#xff0c;轮廓是连续的&#xff0c;边缘不一定连续&#xff0c;如下图所示。其实边缘主要是作为图像的特征使用&#xff0c;比如…