解决vue3导出.xlsx的blob文件受损问题

1、 首先要设置get或者post请求的类型。这里我用到post请求

eg:在http.ts中添加公共的方法。

export function post1(url: string, params: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {return new Promise((resolve, reject) => {server.post(url, params, { responseType: "blob" }).then((res) => {if (res.data.code == 401) {setTimeout(() => {// window.location.href = "/";// location.reload()setLocalStorage("access_token", null);// location.reload()}, 500);} else if (res.data.code == 499 || res.data.code == 401) {} else if (res.data.code == 403 || res.data.code == 402) {ElMessage.error("登录已过期,请重新登录");setTimeout(() => {setLocalStorage("access_token", null);}, 500);}resolve(res.data);}).catch((err) => {reject(err);});});
}

2、在api.ts中引用

export const export = (params?: any) => post1("/xx/xx/xx", params);

3、页面下载

 <el-button @click="exportExcel" :icon="Download" size="small" :disabled="exportExcelDisabled">导出报表</el-button>
const exportExcelDisabled = ref(false);
async function exportExcel() {exportExcelDisabled.value = true; // 防止双击let params = { ...form };await exportWalletTransaction(params).then((res: any) => {const blob = new Blob([res], {type: "application/vnd.ms-excel;charset=UTF-8"});const url = window.URL.createObjectURL(blob); // 创建URL对象const link = document.createElement("a"); // 创建a标签link.href = url;link.download = "xx" + moment(new Date().getTime()).format("YYYY-MM-DD  HH-mm-ss") +".xlsx"; // 设置下载文件名,可以用moment插件添加具体时间document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(url);exportExcelDisabled.value = false; // 防止双击});
}

 

 

 

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

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

相关文章

Jest项目实战(6):搭建文档网站

搭建文档网站 创建 API 文档可以选择如下的 3 种方式&#xff1a; 功能较少&#xff0c;可以直接写在 README.md 文件里面内容较多&#xff0c;可以单独写一个文件API 数量众多&#xff08;Vue、React 这种级别&#xff09;&#xff0c;需要考虑单独拿一个网站来做详细的文档…

STM32项目---水质水位检测

1 项目简介 1.1 项目需求 本项目通过测量水体的TDS来反映水体的质量。并同时可以测量水位&#xff08;水深&#xff09;。 1.2 系统总体设计 2 硬件模块 2.1 硬件选型 水位测量模块 TDS采集模块 外置ADC模块&#xff08;ADS1115&#xff09; 2.2 水位测量模块使用方法 …

从神经元到神经网络:深度学习的进化之旅

神经元、神经网络 神经元 Neuron )&#xff0c;又名感知机( Perceptron )&#xff0c;在模型结构上与 逻辑回归 一致&#xff0c;这里以一个二维输入量的例子对其进行进一步 的解释&#xff1a; 假设模型的输 入向 量是一 维特征向 (x1,x2). 则单神 经元的模型结构 如下…

银行信贷风控专题:Python、R 语言机器学习数据挖掘应用实例合集:xgboost、决策树、随机森林、贝叶斯等

银行信贷风控专题&#xff1a;Python、R 语言机器学习数据挖掘应用实例合集&#xff1a;xgboost、决策树、随机森林、贝叶斯等 原创 拓端研究室 全文链接&#xff1a;https://tecdat.cn/?p38026 在当今金融领域&#xff0c;风险管控至关重要。无论是汽车贷款违约预测、银行挖掘…

某华迪加现场大屏互动系统mobile.do.php任意文件上传

免责声明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 漏洞描述 该系统是实现现场大屏互动&#xff0c;里面功能众多&#xff0c;但在mobile.do.php接口处存在任意文件上传漏洞 搜索语法 fof…

基于Python的学生宿舍管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

【AI视频换脸整合包及教程】AI换脸新星:Rope——让换脸变得如此简单

在数字技术迅猛发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;的应用已经渗透到了我们生活的方方面面&#xff0c;从日常的语音助手到复杂的图像处理&#xff0c;无不体现着AI技术的魅力。特别是在娱乐和创意领域&#xff0c;AI技术更是展现出了惊人的潜力。其中&a…

A012-基于Spring Boot的私房菜定制上门服务系统的设计与实现

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统私房菜定制上门服务系统信息管理难度大&#xff0c;容错率…

EV录屏好用吗?盘点2024年10款专业好用的录屏软件。

EV录屏的方式有很多种&#xff0c;它设置了很多模式&#xff0c;并且录制高清&#xff0c;可以免费使用。但是现在很多的录屏工具都有着与这个软件相似的功能&#xff0c;在这里我可以给大家列举一些。 1、福昕电脑录屏 这个软件为用户提供了多种录制模式&#xff0c;让视频录…

【网易云插件】听首歌放松放松

先看效果&#xff1a; 网易云有两种类似的插件。 第一种 &#xff1a; iframe 优点&#xff1a;可以自己调整插件的高度、宽度 缺点&#xff1a;很多博客网站不支持嵌入iframe&#xff0c;请试一下您的网站是否支持 登录可直接复制代码。 也可以在我这里 <iframe fram…

Java的Object类常用的方法(详述版本)

文章目录 一、什么是Object类二、常用方法&#xff1a;toString&#xff08;&#xff09;三、常用方法&#xff1a;对象比较equals&#xff08;&#xff09;四、常用方法&#xff1a;hashcode&#xff08;&#xff09;五、总结 一、什么是Object类 顾名思义&#xff0c;Object类…

SQL--查询连续三天登录数据详解

问题&#xff1a; 现有用户登录记录表&#xff0c;请查询出用户连续三天登录的所有数据记录 id dt1 2024-04-25 1 2024-04-26 1 2024-04-27 1 2024-04-28 1 2024-04-30 1 2024-05-01 1 2024-05-02 1 2024-05-04 1 2024-05-05 2 20…

docker+mysql配置

拉取mysql docker pull mysqlmysql配置 创建存储文件夹 mkdir -p /home/mysql/{date,conf}在conf文件中配置my.cnf sudo vim my.cnfmy.cnf具体配置 [mysqld] #Mysql服务的唯一编号 每个mysql服务Id需唯一 server-id1#服务端口号 默认3306 port3306#mysql安装根目录&#x…

qt QHeaderView详解

1、概述 QHeaderView 是 Qt 框架中的一个类&#xff0c;它通常作为 QTableView、QTreeView 等视图类的一部分&#xff0c;用于显示和管理列的标题&#xff08;对于水平头&#xff09;或行的标题&#xff08;对于垂直头&#xff09;。QHeaderView 提供了对这些标题的排序、筛选…

删除 需要来自XXXX的权限才能对此文件夹进行更改 文件的解决办法

如果你也是&#xff1a; 如果你也有类似上面的问题&#xff0c;这篇文章算是你看对了&#xff0c;哦哟&#xff01; 我的牙齿现在是怨灵的牙齿&#xff0c;可以啃下一头牛。 翻遍千山万水&#xff0c;咱们也是终于取到真经了家人们。 首先下一个everything好吗 甩一个官网链…

题目练习之二叉树那些事儿(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ 这一篇博客我们继…

本地Docker部署ZFile网盘打造个人云存储,告别公共网盘让你数据安全感爆棚

文章目录 前言1.关于ZFile2.本地部署ZFile3.ZFile本地访问测试4.ZFile的配置5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定ZFile公网地址 前言 本文主要介绍如何在Linux Ubuntu系统使用Docker本地部署ZFile文件管理系统&#xff0c;并结合cpolar内网穿透工具实现远程…

职场逆袭!学会管理上司,你也能成为职场赢家

书友们&#xff0c;不要错过了&#xff01;我挖到了一本真正让我彻夜难眠的小说&#xff0c;情节跌宕起伏&#xff0c;角色鲜活得就像从书里跳出来陪你聊天。每一页都是新的惊喜&#xff0c;绝对让你欲罢不能。要是你也在寻找那种让人上瘾的阅读体验&#xff0c;这本书就是你的…

LangChain Ollama实战文献检索助手(三)思维链COT、思维树TOT和思维网NOT

大模型的思考方式有时候并不尽人意。我们可以在提示词中引导大模型如何拆分任务&#xff0c;按部就班地思考。 一、思维链 思维链是引导模型一步一步地思考&#xff0c;分为Zero-Shot CoT和Few-Shot CoT。Zero-Shot CoT就是著名的Let’s think step by step。Few-Shot CoT是对…

ASP页面改为UTF-8编码后,刷新页面不定时中文输出乱码终极解决方案

IIS7下的ASP页面&#xff0c;改为Utf-8编码后&#xff0c;Html部分的中文显示正常&#xff0c;但是由 Response.Write 输出的中文字符&#xff0c;在不特定的时间会变成乱码&#xff0c;一开始以为是浏览器问题&#xff0c;测试了多个浏览器故障依旧不定时出现&#xff1a; &l…