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.mzph.cn/news/168021.shtml

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

相关文章

UserRole

Qt::UserRole 是 Qt::ItemDataRole 枚举中的一个成员,用于表示自定义数据角色(Data Role)的起始值。 在 Qt 中,Qt::ItemDataRole 枚举用于标识项(Item)中不同类型的数据。这些数据角色包括 Qt::DisplayRol…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】红外热成像

目录 前言 知识储备 红外热成像仪基础知识 算法原理 红外热成像探测距离 红外图像增强

第一百七十八回 介绍一个三方包组件:SlideSwitch

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何创建垂直方向的Switch"相关的内容,本章回中将 介绍SlideSwitch组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们…

多功能智能灯杆主要功能有哪些?

多功能智能灯杆这个词相信大家都不陌生,最近几年多功能智能灯杆行业发展迅速,迅速取代了传统路灯,那么多功能智能灯杆相比传统照明路灯好在哪里呢,为什么大家都选择使用叁仟智慧多功能智能灯杆呢?所谓多功能智能灯杆着…

【libGDX】Mesh纹理贴图

1 前言 纹理贴图的本质是将图片的纹理坐标与模型的顶点坐标建立一一映射关系。纹理坐标的 x、y 轴正方向分别朝右和朝下,如下。 2 纹理贴图 本节将使用 Mesh、ShaderProgram、Shader 实现纹理贴图,OpenGL ES 的实现见博客 → 纹理贴图。 DesktopLauncher…

超级应用平台(HAP)起航

各位明道云用户和伙伴, 今天,我们正式发布明道云10.0版本。从这个版本开始,我们将产品名称正式命名为超级应用平台(Hyper Application Platform, 简称HAP)。我们用“超级”二字表达产品在综合能力方面的突破&#xff…

清华系下一代 LCM

LCM LoRA模型是一种创新的深度学习模型,它通过特殊的技术手段,显著提高了图像生成的效率。这种模型特别适用于需要快速生成高质量图像的场景,如艺术创作、实时图像处理等。 GitHub - luosiallen/latent-consistency-model: Latent Consistenc…

视频监控中的智能算法与计算机视觉技术

智能视频监控是一种基于人工智能技术的监控系统,它能够通过对图像和视频数据进行分析,自动识别目标物体、判断其行为以及进行异常检测等功能,从而实现对场景的智能化监管。以下是常见的一些用于智能视频监控的算法: 1、人脸识别技…

RabbitMQ简易安装

一般来说安装 RabbitMQ 之前要安装 Erlang ,可以去Erlang官网下载。接着去RabbitMQ官网下载安装包,之后解压缩即可。 Erlang官方下载地址:Downloads - Erlang/OTP RabbitMQ官方下载地址:Downloading and Installing RabbitMQ —…

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder

密码,加密,解密 spring-security-crypto-5.7.3.jar /** Copyright 2002-2011 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with t…

Kafka(一)

一:简介 解决高吞吐量项目的需求 是一款为大数据而生的消息中间件,具有百亿级tps的吞吐量,在数据采集、传输、存储的过程中发挥着作用 二:为什么要使用消息队列 一个普通访问量的接口和一个大并发的接口,它们背后的…

C/C++---------------LeetCode第1512. 好数对的数目

好数对的数目 题目及要求暴力算法哈希算法在main内使用 题目及要求 给你一个整数数组 nums 。 如果一组数字 (i,j) 满足 nums[i] nums[j] 且 i < j &#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,…

376.摆动序列

原题链接&#xff1a;376.摆动序列 全代码&#xff1a; class Solution { public:int wiggleMaxLength(vector<int>& nums) {if (nums.size() < 1) return nums.size();int curDiff 0; // 当前一对差值int preDiff 0; // 前一对差值int result 1; // 记录峰…

Android骨架图

用法&#xff1a;在图片上实现动画效果 <FrameLayoutandroid:id"id/image_container"android:layout_width"match_parent"android:layout_height"wrap_content"><ImageViewandroid:id"id/ivBlank"android:layout_width"…

PostgreSQL Patroni 3.0 新功能规划 2023年 纽约PG 大会 (音译)

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;…

React Hooks函数之useRef

useRef 是 React 中常用的 Hook 之一&#xff0c;它返回一个可变的 ref 对象&#xff0c;其 .current 属性被初始化为传入的参数&#xff08;initialValue&#xff09;。返回的 ref 对象在组件的整个生命周期内保持不变。 以下是一些使用 useRef 的场景和示例&#xff1a; 1、…

Mathorcup数学建模竞赛第一届-【妈妈杯】B题:图像识别

目录 知识储备 传统图像处理方法进行瑕疵检测 传统算法方向的选择 瑕疵检测关注的两个问题 瑕疵的标注

【技术分享】RK3399 Ubuntu通过Python实现录音和播放功能

​本文基于IDO-SBC3968 Ubuntu 系统通过Python脚本实现录音和播放功能。 IDO-SBC3968采用RK3399国产六核64位CPU高性能处理器&#xff0c;支持4K HDMI2.0显示&#xff0c;接口丰富&#xff0c;拥有千兆以太网&#xff0c;全协议TypeC接口&#xff0c;USB3.0 &#xff0c;eDP 和…

Redis高并发缓存架构

前言&#xff1a; 针对缓存我们并不陌生&#xff0c;而今天所讲的是使用redis作为缓存工具进行缓存数据。redis缓存是将数据保存在内存中的&#xff0c;而内存的珍贵性是不可否认的。所以在缓存之前&#xff0c;我们需要明确缓存的对象&#xff0c;是否有必要缓存&#xff0c;怎…

ElasticSearch之配置

ElasticSearch主要的配置文件&#xff0c;如下&#xff1a; elasticsearch.yml&#xff0c;ElasticSearch的相关参数。jvm.options&#xff0c;JVM的相关参数。log4j2.properties&#xff0c;日志的相关参数。 默认情况下&#xff0c;ElasticSearch从$ES_HOME/config目录下读…