Vue、React实现excel导出功能(三种实现方式保姆级讲解)

第一种:后端返回文件流,前端转换并导出(常用,通常公司都是用这种方式)

第二种:纯后端导出(需要了解)

第三种:纯前端导出(不建议使用,数据处理放在前端会引发一些不必要的问题

一、实现效果:

二、以下是三种不同方式实现的详细步骤

1、后端返回文件流,前端转换后并导出
(1)添加导出按钮

代码如下:

<!-- 这里我用的是antdVue组件库,按照你当前项目使用的组件库更改一下组件标签即可 -->
<a-button @click="exportTable"><!-- DownloadOutlined 是从组件库中引入的icon图标 --><DownloadOutlined />导出
</a-button>
 (2)添加api接口,配置responseType为blob
// 出库明细导出
exportOutboundDetails(data){//这里需要跟后端对接导出接口用的什么路径和方法,params为调接口所传递的参数,//设置responseType: "blob"这一点很重要,否则会导致转换失败return request.get( "你的接口路径",{params: data,responseType: "blob"})
},
(3)添加点击事件导出excel
2、纯后端导出

后端通过flush下载,前端不需要做其他处理,只需要开一个空白页直接调接口即可(服务端接口会直接下载)

(1)添加导出按钮(页面布局是一样的,这里我就不加入代码了,直接拿上面的即可)
(2)添加点击事件导出excel
3、纯前端导出

(这里以vue2+elementUI为例)

(1)下载并挂载VXETable
// 我使用的版本(先下载再引入):
// "vxe-table": "~1.12.5",
// "vxe-table-plugin-element": "~1.2.1",
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'// 将VXETable挂载到vue上
Vue.use(VXETable)
VXETable.use(VXETablePluginElement)
 (2)添加导出按钮
  <!-- vxe-grid 是一个基于 Vue.js 的表格组件库,用于构建复杂的数据表格。 --><!-- ref="countTable"  这是一个 Vue.js 的引用(ref)属性。通过它,我们可以在 Vue 组件的实例中通过 this.$refs.countTable 访问到这个 vxe-grid 组件实例,从而进行各种操作,如获取数据、修改配置等。 --><!-- :columns='countTableColumn' 是一个定义了表格列的对象数组放在了columns属性上。 --><!-- :data.sync="countTableData" 这里使用了 .sync 修饰符,它是 Vue.js 2.3.0+ 版本中引入的一个语法糖,用于双向绑定父子组件之间的某个 prop。这意味着,当 vxe-grid 组件内部的数据发生变化时,父组件的 countTableData 也会相应地更新,反之亦然。这样就可以轻松地在父组件中管理和操作表格数据。 --><div><a-button @click="exportData"> 导出 </a-button><vxe-grid ref="countTable" :columns='countTableColumn' :data.sync="countTableData"></vxe-grid>
</div>
(3)添加点击事件导出excel
// 下载这两个库,我使用的版本:"file-saver": "^2.0.2"和"xlsx": "^0.14.4"
import XLSX from 'xlsx';
import FileSaver from 'file-saver';// 表格列对象数据(这里我写的死数据用于测试),在data中进行定义
data() {return {countTableColumn:[{field:'category',title:'日期'},{field:'vf_small',title:'购物袋(小)'},{field:'vf_middle',title:'购物袋(中)'},{field:'vf_big',title:'购物袋(大)'}],countTableData: [],//表格数据};
},// getExportData方法用于准备导出表格数据。它选择所有行,提取选定行的数据,并根据列的配置信息创建一个适合导出的数据结构。
getExportData(isHead) {// 在当前 Vue 实例的方法中,找到 ref 为 countTable 的 vxe-grid 组件实例,并调用其 setAllSelection 方法以选中所有行。this.$refs.countTable.setAllSelection(true);// 在当前 Vue 实例的方法中,找到 ref 为 countTable 的 vxe-grid 组件实例,并调用其 getSelectRecords 方法以获取当前被选中的记录数据。let datas = this.$refs.countTable.getSelectRecords();// 下面的数据是我用来做了数据处理,可以根据需求处理,console.log打印一下值,其中field和title是我当前数据中具有的属性,并不是固定的哈~let columns = this.countTableColumn.filter(item => item.field)let headers = isHead ? [columns.map(item => item.title)] : []console.log("datas",datas)console.log("columns",columns)console.log("headers",headers)// 该方法返回一个数组,该数组由 headers 和另一个数组组成。这个另一个数组是通过将 datas 数组中的每一行映射到 columns 数组中的每一列来创建的。这实际上是将二维数据(表格的行和列)转换为一维数组,其中每一行都成为一个嵌套数组,每个嵌套数组中的元素对应于该行的各个列。return headers.concat(datas.map(row => {return columns.map(column => {return row[column.field]})}))
},
// 点击导出
exportData(){let data = this.getExportData(true);// 打印出getExportData处理后的数据console.log("data--",data)// 使用 XLSX.utils.book_new() 方法创建一个新的 Excel 工作簿对象let book = XLSX.utils.book_new()// 使用 XLSX.utils.json_to_sheet 方法将 data(一个 JSON 对象数组)转换为一个 Excel 工作表。{ skipHeader: true } 选项表示在转换过程中跳过 JSON 对象的键(即表头),因为当前数据已经包含表头信息。let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true })// 将上一步创建的工作表 sheet 添加到之前创建的工作簿 book 中。XLSX.utils.book_append_sheet(book, sheet)// 使用 XLSX.write 方法将工作簿 book 转换为二进制格式的字符串。{ bookType: 'xlsx', bookSST: false, type: 'binary' } 是转换选项,指定输出的文件类型为 XLSX,并且不使用共享字符串表(Shared String Table,SST)。let wbout = XLSX.write(book, { bookType: 'xlsx', bookSST: false, type: 'binary' });// 创建一个新的 Blob 对象,其中包含通过 this.toBuffer(wbout) 方法转换后的、数据。Blob 对象用于表示一段不可变的原始数据。let blob = new Blob([this.toBuffer(wbout)], { type: 'application/octet-stream' });// 设置文件名称let exportName ="环保袋耗用量.xlsx";// 使用 FileSaver.saveAs 方法触发浏览器的文件下载功能,将 Blob 对象保存为指定的文件名 exportName(即 "环保袋耗用量.xlsx")。 FileSaver 是一个用于在客户端保存文件的库。FileSaver.saveAs(blob, exportName);
},
toBuffer(wbout) {// 创建一个新的 ArrayBuffer,其大小(以字节为单位)与 wbout 字符串的长度相同。let buf = new ArrayBuffer(wbout.length)// 创建一个新的 Uint8Array 视图,它引用 buf(即上面创建的 ArrayBuffer)。Uint8Array 是一个固定长度的原始二进制数据缓冲区,用于存储 8 位无符号整数。let view = new Uint8Array(buf)// 这是一个循环,遍历 wbout 字符串的每个字符。// wbout.charCodeAt(index) 获取字符串中第 index 个字符的 Unicode 码点。// & 0xFF 是一个按位与操作,用于确保我们只保留 Unicode 码点的低 8 位。这是必要的,因为 Unicode 码点可能是 16 位或 32 位的,但我们只想要其低 8 位。// view[index] = ... 将计算出的 8 位值存储在 view(即 ArrayBuffer)的相应位置。for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xFFreturn buf
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/7005.shtml

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

相关文章

rocky9 安装docker

一&#xff0c;Docker简介 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化&#xff0c;容器是完全使用沙箱机制&#xff0c;相互之间不会有…

算法竞赛——从C/C++到Java

一、基础语法部分&#xff08;请自行复习相关语法&#xff09; 1.1 数组的定义 1.2 输入输出方式&#xff08;必要时需要快读和快写&#xff09; 二、Java中模拟结构体数组的实现方案 public class Main {public static void main(String[] args) {// TODO Auto-generated m…

Apache RabbitMQ 的所有组件以及他是如何保证顺序消费消息的

一、Apache RabbitMQ定义 Apache RabbitMQ 是一个开源消息队列系统&#xff0c;基于 Erlang 语言开发&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;。RabbitMQ 提供了多种消息传递机制&#xff0c;包括点对点&#xff08;direct&#xff09;、发布/订阅&am…

mybatis配置获取自增主键

mybatis配置获取自增主键 【/n】 01 使用场景 当需要刚刚插入数据库的数据对应的新增主键时&#xff0c;通过配置xml文件&#xff0c;使数据库返回新增主键id&#xff0c;并把主键id与类参数对应 02 涉及配置 注解TableId(type IdType.AUTO)&#xff1a;在类主键id通过配…

【CTF MISC】XCTF GFSJ0512 give_you_flag Writeup(图像处理+QR Code识别)

give_you_flag 菜狗找到了文件中的彩蛋很开心&#xff0c;给菜猫发了个表情包 解法 图片的最后一帧好像闪过了什么东西。 用 Photoshop 打开&#xff0c;检查时间轴。 找到一张二维码&#xff0c;但是缺了三个角&#xff08;定位图案&#xff09;&#xff0c;无法识别。 找一…

对于模板,编译器不会执行任何自动类型转换

作为一个模板&#xff0c;编译器不会执行任何自动类型转换。当编译器无法推断函数模板的模板参数时应当在尖括号中告诉编译器要使用哪种类型作为模板参数。 编译器无法知道你想要模板参数具有第一个函数参数的类型&#xff0c;或第二个函数参数的类型&#xff0c;或者有时是第…

从简单逻辑到复杂计算:感知机的进化与其在现代深度学习和人工智能中的应用(上)

文章目录 引言第一章&#xff1a;感知机是什么第二章&#xff1a;简单逻辑电路第三章&#xff1a;感知机的实现3.1 简单的与门实现3.2 导入权重和偏置3.3 使用权重和偏置的实现实现与门实现与非门和或门 文章文上下两节 从简单逻辑到复杂计算&#xff1a;感知机的进化与其在现代…

Linux 磁盘管理命令df du dd

文章目录 3.Linux 磁盘管理命令3.1 df&#xff1a;显示报告文件系统磁盘使用信息案例练习 3.2 du&#xff1a;显示目录或者文件所占的磁盘空间案例练习 3.3 dd&#xff1a;磁盘操作案例练习 3.Linux 磁盘管理命令 3.1 df&#xff1a;显示报告文件系统磁盘使用信息 作用&#x…

Superset二次开发之XAxis 功能优化

背景: 以柱状图(来自Echarts 插件)为例,如果X轴data数据过长,影响图表体验,为此需要省略部分内容 superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformProps.ts import {getBaselineSeriesForStream,getPadding,getTooltipTimeFormatter,getXAxis…

[开发|鸿蒙] 鸿蒙OS开发环境搭建(笔记,持续更新)

搭建开发环境流程&#xff1a; https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/installation_process-0000001071425528-V2 鸿蒙DevEco Studio 3.1.1 Release仅支持windows和mac系统 运行环境要求 为保证DevEco Studio正常运行&#xff0c;建议电脑配置…

16_Scala面向对象编程_函数

文章目录 1.声明Scala函数2.访问伴生对象3.空对象直接用的方法4.构造对象--通过object获取单例对象--直接new--scala独有apply()方式--scala有参构造--scala构造方法两大类使用辅构造如下上述代码主构造为辅助构造方法甚至可以多个多个辅助构造形参内容不能重不使用辅助构造和使…

EasyExcel导出工具类

目录 工具类 头部实体类&#xff08;要和工具类在同一个module或项目下&#xff09; 日期转换器 工具类 /*** 导出Excel工具类*/ public class EasyExcelUtil<T> {/*** 单sheet&#xff08;Map写入&#xff09;* param response 响应对象* param headList 头部集合* p…

Redis(五) Redis锁

结合前四期 Redis(一) Redis简介(Redis(一) Redis简介-CSDN博客) Redis(二) 可编程性(Redis(二) 可编程性-CSDN博客) Redis(三) 事务与发布订阅(Redis(三) 事务与发布订阅-CSDN博客) Redis(四) 主从、哨兵、集群环境搭建(Redis(四) 主从、哨兵、集群环境搭建-CSDN博客) (本文代…

[leetcode] 64. 最小路径和

文章目录 题目描述解题方法动态规划java代码复杂度分析 相似题目 题目描述 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 示例 1&#…

有什么好用的思维导图软件?6个软件教你快速进行思维导图的制作

有什么好用的思维导图软件&#xff1f;6个软件教你快速进行思维导图的制作 以下是六款常用且功能强大的思维导图软件&#xff0c;它们可以帮助您快速制作思维导图&#xff1a; 迅捷画图: 迅捷画图是一款在线思维导图工具&#xff0c;具有直观易用的界面和丰富的功能。用户可…

智驾重感知轻地图路线

1、前言 在自动驾驶中使用HD Map的优点显而易见&#xff1a;超视距感知能力、高精度、高丰富度。其局限性同样很明显&#xff1a;高成本、高覆盖度、低鲜度、受限法规等。比如&#xff0c;2022年&#xff0c;在地图法规收紧&#xff0c;和感知能力增强的双重背景下&#xff0c;…

你对后端系统的安全性有何理解

人生难免经受挫折 风雨过后就是彩虹 生活难免遭受苦难 雨过天晴终有阳光 一、后端安全性 后端安全性是指在开发和运行后端应用程序时&#xff0c;确保应用程序和其中存储的数据免受恶意攻击和不当访问的能力。以下是我对后端安全性的理解&#xff1a; 1. 认证和授权&#xff1a…

C# Solidworks二次开发:枚举应用实战(第十一讲)

大家好&#xff0c;今天继续介绍我们的枚举应用系列。 下面是今天要介绍的枚举值&#xff1a; &#xff08;1&#xff09;第一个为swsPVResultCombinationError_e&#xff0c;这个枚举值的含义为结合压力容器设计研究结果时的错误&#xff0c;下面是官方的具体枚举值&#xf…

sudo权限

目录 1.创建普通用户 2.修改sudo配置文件 3.加入用户组 4.测试 1.创建普通用户 useradd daboluopasswd daboluo 2.修改sudo配置文件 vim /etc/sudoers ## Allow root to run any commands anywhere root ALL(ALL) ALL daboluo ALL(ALL) ALL#添加此行后…

[力扣题解]225. 用队列实现栈

题目&#xff1a;225. 用队列实现栈 思路 用一个队列模拟栈&#xff1b; 假设有数字&#xff1a;1&#xff0c;2&#xff0c;3&#xff1b; pop 队列里是这样的存的&#xff1a;3&#xff0c;2&#xff0c;1&#xff1b; 作为一个栈&#xff0c;应该弹出最后进来的那一个3&…