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

news2024/10/7 11:32:50

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

代码:

    //导出按钮放开
    exportDutySummarizing (dataRangeInfo) {
      const params = {
        departmentName: dataRangeInfo.name,
        departmentQode: dataRangeInfo.qode
      }
        //拼接所需得url
      const baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORT
      this.$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 = url
      link.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.coloradmin.cn/o/1247080.html

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

相关文章

农田气象要素监测仪助力农业发展

随着科技的不断进步,现代农业已经越来越离不开科学技术的支持。其中,WX-NY12 农田气象要素监测仪成为了现代农业中不可或缺的一部分。这款仪器能够实时监测农田中的气象要素,如温度、湿度、光照、风速等,为农民提供更加精准的农业…

10月,1Panel开源面板项目收到了这些评论

2023年10月20日,1Panel开源面板(https://github.com/1Panel-dev)项目发布了题为《9月,1Panel开源面板收到了这些评论》的社区评论合集。在该文章的评论区,很多社区用户跟帖发表了自己对1Panel开源项目的使用感受和意见…

乐得瑞LDR6020 VR串流线方案:实现同时充电传输视频信号

VR(Virtual Reality),俗称虚拟现实技术,是一项具有巨大潜力的技术创新,正在以惊人的速度改变我们的生活方式和体验,利用专门设计的设备,如头戴式显示器(VR头盔)、手柄、定…

HR9110H 单通道低压 H 桥电机驱动芯片

HR9110H为消费类产品、玩具和其它低电压或者电池供电的运动控制类应用提供了一个集成的电机驱动器解决方案。HR9110H是SOP8封装,且是无铅产品,符合环保标准。 HR9110H能够驱动一个直流有刷电机或其他诸如螺线管的器件。输出驱动模块由PMOSNMOS功率管构成…

深入理解数据结构:队列的实现及其应用场景

文章目录 🍂前言🍂队列的基本概念和特性🍂队列的实现方式️🌱顺序队列️🌱链式队列 🍂队列的基本操作及示例代码️🥑创建队列️🥑判空操作️🥑入队操作️🥑出…

什么是工业物联网(IOT)?这样的IOT平台你需要吗?——青创智通

物联网(IOT)是指在互联网上为传输和共享数据而嵌入传感器和软件的互联设备的广泛性网络。这允许将从物理对象收集的信息(数据)存储在专用服务器或云中。通过分析这些积累的信息,通过提供最优的设备控制和方法,可以实现一个更安全、更方便的社会。在智能家…

大数据 DataX-Web 详细安装教程

目录 一、DataX-Web 介绍 1.1 DataX-Web 是什么 1.2 DataX-Web 架构 二、DataX-Web 安装部署 2.1 环境要求 2.2 安装 2.3 部署 2.4 数据库初始化 2.5 配置 2.6 启动服务 2.6.1 一键启动所有服务 2.6.2 一键取消所有服务 2.7 查看服务(注意&#xff01…

智慧医疗 | 拓世法宝商业数字人一体机助力医疗服务全方位升级

随着科技的不断发展,智慧医疗正成为医疗行业的一大趋势。从挂号导诊到医疗服务再到自助买药,数字化技术正逐渐渗透进医疗生态系统,旨在提高医疗服务的效率和质量,为患者提供更便捷的就医体验。 在传统医疗体系中,患者…

【经验分享】在vm中安装openEuler及使用yum安装openGauss

1.前言 随着互联网时代对数据库的新要求,以PostgreSQL为基础的开源数据库openGauss应运而生。openGauss在保持PostgreSQL接口兼容的前提下,对其查询优化器、高可用特性等进行了全面优化,实现了超高性能。 同时,openGauss作为社区项目,新增功能持续丰富。优点是查询性能高、可…

java获取服务器配置文件的值

获取服务器配置文件的值 Value("${bpm.minio.bucketName:}")private String minioBarrel;

echarts笛卡尔坐标系热力图当坐标及数据为小数时

// X坐标轴 const xValue [6,6.5,7,7.5,8,8.5,9,9.5,10]; //Y坐标轴 const yValue [1.5,2,2.5,3,3.5,4,4.5,5,5.5,6]; // 需要展示的值【X坐标,Y坐标,展示的数值】 const data [[6.5,2,4], [7, 2.5, 10]] ; // 坐标轴及数值存在小数时,需要进行转化,否…

第五届全国高校计算机能力挑战赛-程序设计挑战赛(C语言模拟题)

1、已有定义“int a[10]{1,2},i0;”,下面语句中与“ a[i]a[i1],i;”等价的是()。 A. a[i]a[i1]; B. a[i]a[i]; C. a[i]a[i1]; D. i,a[i-1]a[i]; 2、两次运行下面的程序,如果从键盘上分别输入6和4,则输出结果是()。 A. 7和5 …

SOLIDWORKS 2024新功能之Electrical篇

SOLIDWORKS 2024 Electrical篇目录概览 • 对齐零部件 • 更改多个导轨和线槽的长度 • 过滤辅助和附件零件 • 2D 机柜中的自动零件序号 • 移除制造商零件数据 • 重置未定义的宏变量 • 使用范围缩短列表 • SOLIDWORKS Electrical Schematic 增强功能 1、对齐零部件…

Ubuntu 设置Nginx开机自启

1.建立自启动服务文件 vim /usr/lib/systemd/system/nginx.service Descriptionnginx - high performance web server Afternetwork.target remote-fs.target nss-lookup.target [Service] Typeforking ExecStart/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx…

vue的生命周期及不同阶段状态可以进行的行为

什么是vue的生命周期? Vue 的实例从创建到销毁的过程 ,就是生命周期 ,也就是从开始创建 ,初始化数据 ,编译模板 ,挂载Dom到渲染DOM ,更新数据再到渲染 ,卸载等一系列的过程 &#x…

Hologres性能优化指南1:行存,列存,行列共存

在Hologres中支持行存、列存和行列共存三种存储格式&#xff0c;不同的存储格式适用于不同的场景。 在建表时通过设置orientation属性指定表的存储格式&#xff1a; BEGIN; CREATE TABLE <table_name> (...); call set_table_property(<table_name>, orientation,…

RabbitMQ 安装(在docker容器中安装)

为什么要用&#xff1f; RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;主要用于在不同的应用程序之间传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;并提供了一种异步协作机制&#xff0c;以帮助提高系统的性能和扩展性。 RabbitMQ的作…

这是一个最简单的爱国主义为主题的网页首页

代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>爱国主题网页</title> <style> body { font-family: Arial, sans-serif; …

《opencv实用探索·二》根据RGB的像素排列来理解图像深度、像素深度和位深度

通常对于RGB图像主要分为RGB16&#xff0c;RGB24和RGB32。RGB16从高位到低位的排列为R->G->B&#xff0c;RGB24和RGB32从高位到低位的排列为B->G->R。 RGB16: 16 位为一个存储单元&#xff08;一个像素&#xff09;&#xff0c;来存储一个RGB像素;因为人眼对绿色比…

哦?是吗|兜兜转转,最后还是选择了盖雅排班系统

在之前发布的和「人效案例集」中&#xff0c;我们为大家呈现了很多关于人效提升的理论方法&#xff0c;以及各家企业的人效提升提升实践。 回过头来&#xff0c;我们发现&#xff1a;排班管理渗透于人效九宫格之中&#xff0c;也因此成为很多企业人效提升的一个重要中介&#x…