vue导出excel表

article/2025/9/14 2:15:27

方法一:vue2.0 + element UI 中 el-table 数据导出Excel 。https://blog.csdn.net/u010427666/article/details/79208145

方法二:

1.安装2个依赖包(其实是3个)

 npm install -S file-saver xlsxnpm install -D script-loader

2.在项目中新建一个文件夹 vendor(随便取的名字)

放进2个文件 :Blob.js与Export2Excel.js

3.在.vue文件中写方法(现在是根据所选从后台拿数据的写法):

exportTemplate: function() {
this.loading = true
if (this.multipleSelection.length) { //根据选中的某条数据进行导出
const ids = []
this.multipleSelection.forEach(function (item) { //拿到某条数据的订单编号传给后台
ids.push(item.orderId)
})exportExcel({ 
ids: JSON.stringify(ids) //给后台的数据格式是ids:[321,322,323]
})
.then((res) => {// 拿到数组,向后台请求数据。import('@/vendor/Export2Excel').then(excel => {// tHeader是表头,需要导出的表头const tHeader = ['订单ID', '小屋/所属机构', '健康助理', '订单状态', '订单编号', '下单日期', '商品名称', '数量', '商品单价', '订单金额', '优惠金额', '实际支付金额', '收件人详细地址', '收件人姓名', '收件人手机', '备注', '发货日期', '配送方式', '运单编号', '运费', '开票情况']// filterVal是表头绑定的后台给的字段const filterVal = ['orderId', 'projectName', 'nurse', 'orderStatus', 'serialNumber', 'createDate', 'commodityName', 'number', 'costUnitPrice', 'presentUnitPrice', 'reduceUnitPrice', 'subtotal', 'address', 'recipientsName', 'recipientsTelephone', 'note', 'deliveryTime', 'shipperName', 'logisticCode', 'shipperPrice', 'invoice']const list = res.data.map((ele) => {// 表格数据处理if (ele.orderStatus){ ele.orderStatus = ele.orderStatus.text } //因为有枚举类型,所以这里对数据进行处理return ele
})
const data = this.formatJson(filterVal, list)// 给导出的表单名称加个后缀时间let execelDate = format(new Date(), 'YYYY-MM-DD')
excel.export_json_to_excel({
header: tHeader,
data,
filename: '订单汇总' + execelDate //这里加了时间
})
this.loading = false
})
})
.catch(() => {
this.loading = false
})
} else {
this.$message({
message: '请选择至少一项订单',
type: 'warning'
})
}
},
formatJson(filterVal, jsonData) { //这里必须写
return jsonData.map(v => filterVal.map(j => v[j]))
},

4.导出的文件是这个样子

注意:上面使用的时间样式,是用了 data-fns 插件。是个轻量级时间插件

npm install date-fns --save

import { format } from 'date-fns'

const execelDate = format(new Date(), 'YYYY-MM-DD')

综上;

(每天加油一点点ヾ(◍°∇°◍)ノ゙)


http://chatgpt.dhexx.cn/article/bhJReykb.shtml

相关文章

Vue导出Excel的实现方法与原理

摘要:本文将详细介绍前端Vue中导出Excel的方法,包括使用第三方库和纯前端实现两种方式。同时解释其原理,帮助读者了解如何在Vue项目中高效地导出Excel文件。 第三方库:exceljs exceljs是一款功能强大的JavaScript库,它…

Vue实现excel文件的导出功能(后端直接返回文件流)

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。 🐈‍⬛ 两只猫🐱和一只狗的铲屎官🐶 🧣 微博: GuoJ阝阝(fu) 文章目录 前言一、实现效果二、实现步骤1、添加导出按钮2、添加点击事件函数3、获取当…

vue导出excel表格(详细教程)

在开发的时候,会经常用的导出excel表格功能,刚好自己开发有遇到,就记录一下 一、安装vue-json-excel npm install vue-json-excel -S二、main.js中引入 import JsonExcel from vue-json-excel Vue.component(downloadExcel, JsonExcel)三、在代码中使…

Vue2中导出Excel

目录 方式一 :vue-json-excel 1、引入vue-json-excel 2、 main.js中全局注册 3、使用 4、效果图 ​​ 方式二:file-saver、xlsx、script-loader 1、引入依赖 2、下载并引入Blob.js和Export2Excel.js 3、使用 4、效果图 导出指定的记录 1、引…

内网建站 NAT穿透 局域网穿透

背景: 一直想搭建个人的博客,但是买云服务器一年动则几千少则几百,想到家里有一台空闲的笔记本,于是乎想到了内网穿透~ 准备工作: 个人电脑一台,小蝴蝶内网穿透 步骤一: 搭建好内网博…

内网穿透是什么?

文章目录 内网穿透的目的内网穿透的阻碍如何实现知识点正向代理反向代理 参考: 内网穿透 知识点 内网穿透是什么,如何利用花生壳实现内网穿透 内容从网络上收集而来 内网穿透的目的 使得外网能够访问内网应用。 或者,使得 两个内网能够相互通…

内网穿透-把自己的电脑部署为公网可访问的服务器

推荐一款工具,能够把自己电脑上的项目暴露到公网上、把自己的项目展示给别人看看。 使用很方便,可免费(有收费项目)使用。 下载 工具叫做 cpolar ,其下载地址为:https://i.cpolar.com/m/4GSo &#xff0c…

内网穿透技术有哪些(经验分享)

内网穿透技术:说到内网穿透,相信很多人肯定一知半解,到底什么是内网穿透呢!什么情况下需要内网穿透呢!接下来给大家简单的述说一下原理,内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了…

可以实现内网穿透的几款工具

https://blog.csdn.net/qq_36468810/article/details/109219639 me批注:现在流行使用cpolar,极客工具,HTTPS安全的隧道穿透,用它来调试微信公众号,远程控制树梅派,超级方便。而且还是免费的。https://cpol…

浅谈内网穿透

内网穿透,也叫NAT穿透,进行NAT穿透是为了使具有某一个特定源ip地址和源端口号的数据包不被NAT设备屏蔽而正确路由到内网主机。 什么是【内网穿透】? 在当前的互联网环境中,由于IPv4的公网地址数量是有限的,无法给每一台…

内网穿透什么意思?内网穿透基础知识原理内网穿透服务器搭建可以干嘛服务器端口映射无需公网IP教程方法

内网穿透什么意思?内网穿透基础知识原理内网穿透服务器搭建可以干嘛服务器端口映射无需公网IP教程方法 什么是内网(今天说点大家都能听得懂的!!!) 通常情况下,内网 可以简单的理解为路由器创建…

内网穿透的作用 免费内网穿透有哪些 可以用来干什么

相信有很多人都会被一个问题所困惑,我们在日常办公和生活中;一些内网访问的应用,如何让实现在任意外网进行链接访问呢?有人说可以用内网穿透 内网穿透具体是什么,原理是什么;今天我们用网云穿来做演示。内…

重启路由器可以换IP吗

想换IP有哪些方法可以实现?有时候IP被限制了,怎么换IP访问,重启路由器可以换IP吗?一般家庭的基于PPPOE拨号方式上网的,使用的是动态IP,可以更换IP,下面一起去看看如何重启路由器: 1、断电源重启…

矩阵切换器有哪些控制方式,有什么好处

矩阵切换器有哪些控制方式呢?矩阵切换器,可以使用网络控制,app控制,web等方式控制。 一、网络控制是指设备加一个网络模块使得在一个局域网内电脑进行控制。 二、app控制是指设备加一个app控制模块,使得手机&#xf…

vmware 静态ip上网 防止切换网络换ip

问题:因为电脑有的时候用公司wifi、手机热点、或家里的wifi进行上网。但要保证vmware虚拟机固定ip且能访问网络。 一、安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet1 Net网络连接方式,随意…

手机如何远程连接服务器

所有VPS均同时支持MSTSC、VNC和手机远程控制,本篇为手机连接教程 0、首先下载安装APP微软的RD Celient 1、运行RD Celient ,点击右上角的加号 2、然后在谈出的窗口选择Desktop来添加远程服务器地址 3、Host name or ip address这里填远程服务器的连接地址…

SOME/IP与SOME/IP SD规范介绍

此文标准来源于AUTOSAR_PRS_SOMEIPProtocol.pdf(R21-11)和AUTOSAR_PRS_SOMEIPServiceDiscoveryProtocol.pdf(R21-11); 1. 前言 AOTOSAR – AUTomotive Open System ARchitecture,汽车开发系统体系结构; SOME/IP – Scalable service-Orient…

什么是IP转换器?我们看看IP转换器的原理与应用及了解它的一些功能和用途

海外用户访问国内网站看视频/下东西/玩游戏 ; 代理电脑或者手机IP地址,显示不同地区和城市IP。 国内用户玩游戏,电信 联通 网通 互转 降低延迟,加快速度。 完善的加密技术,全面保护信息安全 特性:安全 稳定 高速。 可以…

Selenium小技巧 修改ip+ua 改变窗口大小 手机模式 加载本地缓存

修改ip 可以通过代理api取到proxy,实现切换全国ip proxy 0.0.0.0:6666# 设置代理chrome_options.add_argument(--proxy-server%s % proxy)# 注意options的参数用之前定义的chrome_optionschrome webdriver.Chrome(optionschrome_options)chrome.get(https://www…

网络基础之网络协议,OSI,TCP/IP介绍

文章目录 1 概述1.1 网络协议1.2 OSI模型1.2.1 应用层1.2.2 表示层1.2.3 会话层1.2.4 传输层1.2.5 网络层1.2.6 数据链路层1.2.7 物理层 1.3 TCP/IP参考模型1.3.1 网络接入层1.3.2 网络层1.3.2.1 IP1.3.2.2 ICMP1.3.2.3 ARP 1.3.3 传输层1.3.4 应用层1.3.4.1 HTTP1.3.4.2 POP31…