后端返回文件流,前端实现点击按钮自动导出Excel文件

news2024/10/6 10:32:09

首先封装接口,此接口需要传Excel目标数据中的主键id,注意要加上responseType: 'blob'

import request from '@/utils/request';
const prefix = xxxxx + '/test';

export async function exportExcel(id: any) {
  return request(prefix + '/export-excel/' + id,{
    method: 'GET',
    responseType: 'blob'
  })
}

JS部分(如果后端返回文件流,以下代码基本通用,区别在接口名、传值和定义文件名称)

import { exportExcel } from '@/services' //引入接口

const getExcel = async (id: any) => {
  // 调接口,传id,返回文件流
  const res = await exportExcel(id);

  // 将文件流转成Blob格式,类型为xlsx,若不确定格式,type可改为'application/octet-stream'
  const blob = new Blob([res], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });
  console.log(blob, 'blobv');
  const url = window.URL.createObjectURL(blob);

  // 创建一个 a 标签并设置其属性
  const link = document.createElement('a');
  link.href = url;
  link.download = 'ExcelName.xlsx';

  // 模拟用户点击下载链接
  document.body.appendChild(link);
  link.click();

  // 移除链接
  document.body.removeChild(link);

  // 释放资源
  window.URL.revokeObjectURL(url);
};

 最后,给按钮绑定点击事件,传主键id,即可实现自动下载Excel文件

<Button onClick={() => getExcel(data.id)}>
  导出
</Button>

效果图: 

 

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

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

相关文章

同科医药×实在智能丨数字员工“进驻”上市企业,让健康服务更近、更快、更优惠!

数字化浪潮构成了新世界跳动的脉搏&#xff0c;在医药行业转型的大环境下&#xff0c;实现数字化升级已经成为医药企业走向未来、拓展全球市场的必由之路。 近日&#xff0c;济南同科医药物流有限公司&#xff08;简称“同科医药”&#xff0c;系同科股份全资子公司&#xff0c…

用“平面两点距离”求三角形面积及多边形面积

大于 32 边的多边形&#xff0c;都可以任一顶点发出的边切分为 n-2 个三角形。 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么简单…… 地址&#…

IIC通信理解

前言 就个人对IIC通信的理解&#xff0c;通过用图文的方式&#xff0c;尽量简洁的记录下此文。希望能对大家理解IIC通信协议有所帮助。 理解IIC 对于IIC协议的理解&#xff0c;我个人是将完整的IIC时序协议&#xff0c;分成六大块理解。分别是开始条件,结束条件,发送字节,发送字…

数智赋能,专精特新 | 数说故事揽获多项荣誉认定

迈进2023崭新的节点&#xff0c; 数说故事秉持着数据驱动智能决策的使命&#xff0c; 专精特新&#xff0c;砥砺深耕&#xff0c; 拥抱大模型&#xff0c;算法技术迈上新台阶&#xff1b; 推陈出新&#xff0c;产品线持续迭代升级&#xff1b; 以行业领先的技术、专业的数…

基础IO(三)

软硬链接和动静态库 1.软硬链接2.动态库和静态库2.1理解现象2.2静态库的设计2.3动态库2.4动态库的配置2.5动态库的理解 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680;&#x1f680;系列专栏&#xff1a;【Linux…

Kafka中时间轮算法的使用

简介&#xff1a; Kafka的心跳处理机制竟然用到了时间轮算法&#xff1f; Broker端与客户端的心跳在Kafka中非常的重要&#xff0c;因为一旦在一个心跳过期周期内(默认10s)&#xff0c;Broker端的消费组组协调器(GroupCoordinator)会把消费者从消费组中移除&#xff0c;从而触…

U盘数据丢失怎么恢复?优盘数据恢复,看这4个方法!

案例&#xff1a;U盘数据丢失怎么恢复&#xff1f; 【我的U盘里真的存了很多重要的视频和图片&#xff0c;但是前段时间U盘好像中病毒了&#xff0c;导致我很多的图片都丢失了&#xff01;大家有什么好方法可以帮我恢复U盘中的重要数据吗&#xff1f;真的超级感谢&#xff01;…

ZED使用指南(五)

六、其他 1、相机 &#xff08;1&#xff09;选择视频模式 左右视频帧同步&#xff0c;以并排格式作为单个未压缩视频帧流式传输。 在ZED Explorer或者使用API可以改变视频的分辨率和帧率。 &#xff08;2&#xff09;选择输出视图 ZED能以不同的格式输出图像&#xff0c;…

基于Java+SpringBoot+Mybaties+Layui 小区物业管理系统设计与实现

一.项目介绍 小区物业管理系统分为两类&#xff0c;一类是业主、一类是管理员 业主的功能有&#xff1a;小区首页、房屋购买、车位购买、公告通知、出入登记、投诉服务、报修服务、关于我们 管理员的功能有&#xff1a;楼宇管理、住房管理、车位管理、物业管理、收费项目管理、…

yolov8seg模型转onnx转ncnn

yolov8是yolo的最新版本&#xff0c;可做图像分类&#xff0c;目标检测&#xff0c;实例分割&#xff0c;姿态估计。 主页地址 这里测试一个分割模型。 模型如下 选yolov8n-seg模型&#xff0c;转成onnx&#xff0c;再转ncnn测试。 yolov8s-seg的ncnn版可以直接用这个 如果用…

Linux代码性能分析工具

一、gperftools 1、gperftools安装 docker下需要安装gperftools、ghostscript、graphviz gperftools&#xff1a; # 从github下载gperftools源码并解压 wget https://github.com/gperftools/gperftools/releases/download/gperftools-2.9.1/gperftools-2.9.1.tar.gz tar -x…

(1分钟速览)图像金字塔对比--光流法and fast角点

图像金字塔对比--光流法and fast角点 ​ fast角点以计算快为出名&#xff0c;但是其不具有尺度不变性和旋转不变性。针对尺度不变性&#xff0c;其说的是对于远处和近处相同的一个物体&#xff0c;可能近处能够检测出来有角点&#xff0c;但是放远了以后就不一定能检测出来角点…

良好的水生态环境对人居生活的帮助

水是生命之源&#xff0c;良好的水源生态&#xff0c;对于人们的生活健康提供很大的作用&#xff0c;在农村污水处理中&#xff0c;利用污水处理设备进行水源净化排放是很常用的手段。 良好的水环境对人居生活有很多的帮助&#xff0c;主要包括以下几个方面&#xff1a; 1.提供…

类和对象 - 中(C++)

目录 类的6个默认成员函数 一、构造函数 概念 特性 二、析构函数 特性 三、拷贝构造函数 概念 特性 四、赋值运算符重载 运算符重载 前置和后置重载​​​​​​​ 赋值运算符重载 五、& 取地址操作符重载 六、const & 取地址操作符重载 认识const成员 const & 运…

第七章 TensorFlow实现卷积神经网络--代码调试

注&#xff1a;实验工具为jupyter,该python环境为3.7并安装了1.14.0版本的tensorflow &#xff0c;这是本人基于最新版的anaconda下新建的环境&#xff0c;至于在头歌环境平台及其他平台并未验证&#xff0c;而我们需要安装和更新包也需要在自己新建的环境命令行下才有效。 //这…

CloudCompare二次开发之如何通过PCL进行点云采样?

文章目录 0.引言1.CloudCompare界面设计采样(sample)按钮2.RandomSample随机下采样3.VoxelGrid体素下采样4.UniformSampling均匀采样5. MovingLeastSquares增采样6.SamplingSurfaceNormal非均匀体素采样 0.引言 因笔者课题涉及点云处理&#xff0c;需要通过PCL进行点云数据一系…

MySQL之数据目录

前言 本文章收录在MySQL性能优化原理实战专栏&#xff0c;点击此处查看更多优质内容。 本文摘录自 ▪ 小孩子4919《MySQL是怎样运行的&#xff1a;从根儿上理解MySQL》 我们知道像InnoDB、MyISAM这样的存储引擎都是把表存储在磁盘上的&#xff0c;而操作系统用来管理磁盘的那…

C. Classy Numbers(dfs构造 + 组合数学)

Problem - C - Codeforces 让我们称某个正整数为“优美的”&#xff0c;如果它的十进制表示中不超过3个数字不为零。例如&#xff0c;数字4、200000、10203是优美的&#xff0c;而数字4231、102306、7277420000则不是。 给定一个区间[L;R]&#xff0c;请计算在此区间内有多少个…

Linux awk流编辑器

awk流编辑器 工作原理 逐行读取文本&#xff0c;默认以空格或tab键为分隔符进行分隔&#xff0c;将分隔所得的各个字段保存到内建变量中&#xff0c;并按模式或者条件执行编辑命令。 sed命令常用于一整行的处理&#xff0c;而awk比较倾向于将一行分成多个“字段”然后再进行处理…

pix2pix

Image-to-Image Translation Using Conditional Adversarial Networks 1&#xff1a; pix2pix也是CGAN的一种&#xff0c;pix2pix可以学习输入到输出的映射&#xff0c;同时也学习了损害函数去训练这个映射。这是一个大一统的方法去实现从标签合成图像&#xff0c;从边界图重建…