vue中下载文件后无法打开的坑

今天在项目开发的时候临时要添加个导出功能我就写了一份请求加导出得代码,

代码:

    //导出按钮放开exportDutySummarizing (dataRangeInfo) {const params = {departmentName: dataRangeInfo.name,departmentQode: dataRangeInfo.qode}//拼接所需得urlconst baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORTthis.$axios({method: 'POST',url: utils.strFormat(baseUrl, {departmentName: params.departmentName,departmentQode: params.departmentQode}),headers: {Authorization: 'bearer ' + Cookies.get('Access-Token'),//token'Content-Type': 'application/json'},responseType: 'blob',//类型 这个必须要data: {//参数a: '1'}}).then((response) => {//公共的下载方法 在下面展示utils.download(response, dataRangeInfo.name + '名字.xlsx')}).catch(() => { })}//公共的下载方法util.download = function (data, filename) {if (!data && !filename) {return}let url = window.URL.createObjectURL(new Blob([data]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', filename)document.body.appendChild(link)link.click()}

 到这里请求文件流和导出文件得方法都已经写完了,这里面有的坑呢 打开就是返回得数据,大概就是你new Blob([data])得时候这个data是否是文件流,这个例子后端直接给我返回了文件流所以就直接使用了 一边都是res.data这样使用,再有就是responseType: 'blob',这个在请求文件流时请求头中必须要写,其他就没什么了。

如果到这里下载下来的文件还是无法打开请往下看

下面就要说的就是mockjs了

mockjs 会拦截axios, 初始化的时候给拦截响应设置了 responseType: ' ',

所以只需要把 mockjs注释掉或者在.env把VUE_APP_BUILD_MODE设置成nomock中就可以了.

改完记得重启项目!

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

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

相关文章

数据结构算法-贪心算法

引言 贪心:人只要有 “需求“ ,都会有有点“贪“, 这种“贪“是一种选择,或者“”取舍“ RTS(即时战略)游戏: 帝国时代里 首先确保拥有足够的人口 足够的粮食,足够的战略资源 足够的…

Unity RenderFeature架构分析

自定义RenderFeature接口流程 URP内部ScriptableRenderPass分析 public、protected属性 renderPassEvent :渲染事件发生的时刻colorAttachments :渲染的颜色纹理列表 m_ColorAttachmentscolorAttachment :m_ColorAttachments[0];depthAttac…

希宝猫罐头怎么样?专业人士告诉你什么牌子的猫罐头好

而作为一个开猫咖5年的老板,对于猫咪吃的健康我一直很重视,毕竟健康的猫咪是决定我店铺生意红火的重要原因。我有必要给大家分享一下这些年我喂养猫罐头的经验,并推荐我觉得可以的猫罐头。那么希宝猫罐头表现怎么样呢? 希宝猫罐头…

Python开源项目之人工智能老照片修复算法学习

文章目录 前言项目环境搭建conda虚拟环境创建激活环境Pytorch安装Synchronized-BatchNorm-PyTorch repository安装Global目录Synchronized-BatchNorm-PyTorch项目部署检测预处理模型下载下载脸部增强模型文件下载依赖完整部署后项目结构 项目使用验证一下总结关于Python技术储备…

Android Tombstone 与Debuggerd 原理浅谈

一、前言 Android系统类问题主要有stability、performance、power、security。Android集成一个守护进程tombstoned是android平台的一个守护进程,它注册成3个socket服务端,客户端封装在crash_dump和debuggerd_client。 crash_dump用于跟踪定位C crash&am…

万宾科技可燃气体监测仪的功能有哪些?

随着城市人口的持续增长和智慧城市不断发展,燃气作为一种重要的能源供应方式,已经广泛地应用于居民生活和工业生产的各个领域。然而燃气泄漏和安全事故的风险也随之增加,对城市的安全和社会的稳定构成了潜在的威胁。我国燃气管道安全事故的频…

mac 修改 hosts 文件

打开 hosts 所在文件夹 command shift G 快捷键 输入:“/private/etc/hosts” 后回车 如下所示 进入 hosts 文件所在位置,找到 hosts 文件,双击打开 修改 hosts 文件 将所需要的配置信息追加到hosts 文件中,或者修改需要改…

智慧楼宇可视化视频综合管理系统,助力楼宇高效安全运行

随着互联网技术的进步和发展,智能化的楼宇建设也逐步成为人们选择办公场所是否方便的一个重要衡量因素。在智能化楼宇中,安全管理也是重要的一个模块。得益于互联网新兴技术的进步,安防视频监控技术也得到了快速发展并应用在楼宇的安全管理中…

burp抓取雷电模拟器的数据包

文章目录 一、从burp中导出证书二、雷电模拟器的相关设置三、将burp的证书添加到模拟器的系统证书下四、安装ProxyDroid 所需软件 雷电模拟器版本:4.0.83Burp Suite Community Edition v2023.10.3.6ProxyDroid 起因:常规方法(wifi处添加代理…

满满干货!搭建智能视频监控系统如何挑选前端设备?

在此前的文章中,小编也和大家讨论过如何选择适合场景需求又性价比高的摄像头。除了摄像头以外,智能监控系统的组成也少不了前端设备,今天就给大家介绍一下几大前端设备的区别与应用场景吧。 在智能视频监控中,前端设备一般分为四类…

C语言众数问题(ZZULIOJ1201:众数问题)

题目描述 给定含有n个元素的多重集合S,每个元素在S中出现的次数称为该元素的重数。多重集S中重数最大的元素称为众数。 例如,S{1,2,2,2,3,5}。多重集S的众数是2,其重数为3。 编程任务…

保姆级连接FusionInsight MRS kerberos Hive

数新网络,让每个人享受数据的价值https://xie.infoq.cn/link?targethttps%3A%2F%2Fwww.datacyber.com%2F 概述 本文将介绍在华为云 FusionInsight MRS(Managed Relational Service)的Kerberos环境中,如何使用Java和DBeaver实现远…