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.rhkb.cn/news/491201.html

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

相关文章

「数据结构详解·十五」树状数组

「数据结构详解一」树的初步「数据结构详解二」二叉树的初步「数据结构详解三」栈「数据结构详解四」队列「数据结构详解五」链表「数据结构详解六」哈希表「数据结构详解七」并查集的初步「数据结构详解八」带权并查集 & 扩展域并查集「数据结构详解九」图的初步「数据结构…

复合机器人为生产提供精准的建议和决策支持

在现代化生产的浪潮中&#xff0c;智能复合机器人以其卓越的性能和高度智能化特点&#xff0c;正成为保障生产安全与可靠性的重要力量。 智能复合机器人具备精确的感知、判断和决策能力&#xff0c;能够在复杂的生产环境中自主导航、精确操作&#xff0c;避免了人为因素可能导致…

实现按键按下(低电平)检测到下降沿

按照流程进行编程 步骤1&#xff1a; 初始化函数 包括时基工作参数配置 输入通道配置 更新中断使能 使能捕获、捕获中断及计数器 HAL_TIM_IC_Init(&ic_handle) //时基参数配置 HAL_TIM_IC_ConfigChannel(&ic_handle,&ic_config,TIM_CHANNEL_2) //输…

软件开发中的三层结构

一、三层结构概述 在软件开发中&#xff0c;三层结构&#xff08;Three - Tier Architecture&#xff09;是一种常见的软件架构模式。它将软件系统分为三个主要的层次&#xff0c;即表示层&#xff08;Presentation Layer&#xff09;、业务逻辑层&#xff08;Business Logic L…

【MQ】大白话告诉你什么是MQ,没有比这还详细还易懂的文章了吧,以RabbitMQ为例,从小白到大神

目录 分布式系统通信方式 MQ选型与应用场景 应用场景&#xff08;优势&#xff09; RabbitMQ工作模型 RabbitMQ简介 RabbitMQ 工作模型&#xff08;流程&#xff09;​编辑 Docker安装配置RabbitMQ RabbitMQ管理控制台 RabbitMQ 简单模式构建生产者 RabbitMQ 简单模式…

RTMP推流平台EasyDSS在无人机推流直播安防监控中的创新应用

无人机与低空经济的关系密切&#xff0c;并且正在快速发展。2024年中国低空经济行业市场规模达到5800亿元&#xff0c;其中低空制造产业占整个低空经济产业的88%。预计未来五年复合增速将达到16.03%。 随着科技的飞速发展&#xff0c;公共安防关乎每一个市民的生命财产安全。在…

PCIE概述

PCIE概述 文章目录 PCIE概述前言一、应用场景二、PCIE理论2.1 硬件2.2 拓扑结构&#xff1a;处理器和设备之间的关系2.3 速率2.4 层次接口2.5 四种请求类型2.5.1 bar空间2.5.2 memory2.5.3 IO2.5.4 configuration2.5.5 message 前言 参考链接&#xff1a; pcie总线知识点解析 …

SpringBoot SPI

参考 https://blog.csdn.net/Peelarmy/article/details/106872570 https://javaguide.cn/java/basis/spi.html#%E4%BD%95%E8%B0%93-spi SPI SPI(service provider interface)是JDK提供的服务发现机制。以JDBC为例&#xff0c;JDK提供JDBC接口&#xff0c;在包java.sql.*。MY…

超详细!Jmeter性能测试

前言 性能测试是一个全栈工程师/架构师必会的技能之一&#xff0c;只有学会性能测试&#xff0c;才能根据得到的测试报告进行分析&#xff0c;找到系统性能的瓶颈所在&#xff0c;而这也是优化架构设计中重要的依据。 测试流程&#xff1a; 需求分析→环境搭建→测试计划→脚…

快速本地化部署 OnlyOffice服务 ( Linux+Docker)

文章目录 一、OnlyOffice介绍&#x1f4d6;二、集成OnlyOffice&#x1f9e9;2.1 环境准备&#x1f5a5;️2.2 搜索镜像2.3 拉取镜像2.4 查看镜像2.5 创建容器2.6 进入容器配置2.7 重启服务2.8 添加字体字号2.9 测试OnlyOffice服务 三、在线预览office文档四、Cpolar内网穿透 一…

加密--03--MD5-- JAVA运用(hutool工具包)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 hutool1.简介2.pom.xml3.Hutool-crypto概述4.MD5 加密 案例11.hutool依赖2.用户表3.加密方法4.业务代码 hutool https://www.hutool.cn/docs/#/ 1.简介 2.pom.xml …

CSS 实现带tooltip的slider

现代 CSS 强大的令人难以置信 这次我们来用 CSS 实现一个全功能的滑动输入器&#xff0c;也就是各大组件库都有的slider&#xff0c;效果如下 还可以改变一下样式&#xff0c;像这样 特别是在拖动时&#xff0c;tooltip还能跟随拖动的方向和速度呈现不同的倾斜角度&#xff0c…

关于SAP Router连接不稳定的改良

这个也是网上看来的&#xff0c;之前在用的时候也在想是不是建立一个长连接&#xff0c;就不至于断线。今天正好看到。 关于SAP Router连接不稳定的改良 我们在使用SAPRouter时经常会碰到断线&#xff0c;其发生原因有很多&#xff0c;如&#xff1a;网络不稳定、操作间隔时间…

docker 搭建自动唤醒UpSnap工具

1、拉取阿里UpSnap镜像 docker pull crpi-k5k93ldwfc7o75ip.cn-hangzhou.personal.cr.aliyuncs.com/upsnap/upsnap:4 2、创建docker-compose.yml文件&#xff0c;进行配置&#xff1a; version: "3" services:upsnap:container_name: upsnapimage: crpi-k5k93ldwf…

Python课设-谁为影狂-豆瓣数据【数据获取与预处理课设】

&#x1f3c6; 作者简介&#xff1a;席万里 ⚡ 个人网站&#xff1a;https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜&#xff0c;同时略懂Vue与React前端技术&#xff0c;也了解一点微信小程序开发。 &#x1f37b; 对计算机充满兴趣&#xff0c;愿意并且希望学习更多的技…

STM32 进阶SPI案例1:软件模拟SPI读写FLASH

需求描述 基于寄存器操作&#xff0c;使用软件模拟SPI协议&#xff0c;完成读写FLASH。 硬件电路设计 寄存器代码书写 main.c #include "usart1.h" #include "string.h" #include <stdio.h> #include "m24c02.h" #include "soft_…

Qt WORD/PDF(一)使用 QtPdfium库实现 PDF 预览

文章目录 一、简介二、下载 QtPdfium三、加载 QtPdfium 动态库四、Demo 使用 关于QT Widget 其它文章请点击这里: QT Widget 姊妹篇: Qt WORD/PDF&#xff08;一&#xff09;使用 QtPdfium库实现 PDF 操作 Qt WORD/PDF&#xff08;二&#xff09;使用 QtPdfium库实现…

【SpringCloud】OpenFeign配置时间Decode

文章目录 1.自定义反序列化器2.配置类与自定义 ObjectMapper客户端 需求&#xff1a;OpenFeign配置自定义decode&#xff0c;解析http请求返回的时间字符串 1.自定义反序列化器 Date 自定义反序列化器 import com.fasterxml.jackson.core.JsonParser; import com.fasterxml.j…

java程序设计2(二)

自动装箱和自动拆箱&#xff1a;基本数据类型和包装类型之间可以直接相互转换的包装类通常可以区分有效数据和无效数据&#xff0c;例如&#xff1a;0和nullString类 获取字符串的方式 【企业面试】 String str1 "hello"; 这种获取字符串的方式&#xff0c;在串池…

百度地图JavaScript API核心功能指引

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口&#xff0c;它能够帮助您在网站中构建功能丰富、交互性强的地图应用&#xff0c;包含了构建地图基本功能的各种接口&#xff0c;提供了诸如本地搜索、路线规划等数据服务。百度地图JavaScript API支持HTTP和HT…