vue下载文件,获取header头文件名乱码,下载文件名有下划线的解决

news2024/11/17 5:25:57

后台以数据流将文件返回,将文件名放在header头里,是中文名,有乱码,如图
在这里插入图片描述
访问网络使用的是axios,在


// 响应拦截器
service.interceptors.response.use(
  (res) => {
  ........
if (res.config.responseType == 'blob') {
      //文件类型,如果有名称返回使用服务器返回的名称
      console.log("res.headers=", res.headers);
      console.log("res.config.headers=", res.config.headers);
      let filename = null;
      if (res.headers && res.headers["content-disposition"]) {
        let disposition = res.headers["content-disposition"];
        console.log("disposition=", disposition);
        let sp = res.headers["content-disposition"].split("filename=");
        console.log("sp=", sp);
        if (sp && sp.length > 1) {
          filename = decodeURI(sp[1]);
        }
        console.log("filename=", filename);
        res.data.filename=filename;
      }
    }
    ........
    }

下载代码

 onClickDownload($index, row) {
      downloadPexamNoticeFile(row.id).then((res) => {
     
        console.log("downloadPexamNoticeFile",new Blob([res]))
        let fileName=decodeURIComponent(this.stringToHex(res.filename));
        console.log("fileName",fileName)
        let blob = new Blob([res]);
        let elink = document.createElement("a");
        elink.download = fileName; // 下载文件名称
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink); //下载完成移除元素
        window.URL.revokeObjectURL(elink); //释放掉blob对象
      });
    },

有乱码,用以下方法处理

 stringToHex(str, joinFlag = "%") {
    let arr = [];
    for (let i = 0; i < str.length; i++) {
      arr[i] = str.charCodeAt(i).toString(16);
    }
    return joinFlag + arr.join(joinFlag);
  },

elink.download前后有下划线,这可能意味着download是一个保留字或者属性名包含非法字符。
修改,改成

  elink['download'] = fileName; // 下载文件名称

使用方括号语法来访问download属性,这是因为它可能是一个保留字或者包含非法字符(比如空格)
如果还有问题,用这个试试

elink['download']=fileName.replace(new RegExp('"', 'g'), '')

结束!!!

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

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

相关文章

第十六篇:数据库性能优化:从基础到高级的全面指南

数据库性能优化&#xff1a;从基础到高级的全面指南 1. 引言 在数字化的浪潮中&#xff0c;数据库作为信息系统的核心组件&#xff0c;其性能的优劣直接关系到企业的运营效率和市场竞争力。数据库性能优化不仅是一项技术挑战&#xff0c;更是一项战略任务。它要求我们深入理解…

数据结构(栈):中缀表达式转后缀表达式题型的快速图解法(求栈中操作符等)

2024/5/14&#xff1a; 学编译原理的时候接触到了递归树的画法&#xff0c;中缀转后缀的解题过程和编译原理中的递归树有异曲同工之妙。今日解题的时候想了一下图解法&#xff0c;遂记录&#xff0c;本质上是对递归树的改进。 图解原理概述 以表达式 ab*(c-d)e 为例&#xff0c…

Redis一主二从三哨兵配置

一.安装Redis&#xff08;三台主机&#xff09; 1.下载redis安装程序 访问https://redis.io/download/ 进行对应系统和版本的下载&#xff0c;以下以redis的7.0.5为例安装 2.安装redis mkdir -p /data/soft #创建软件安装程序的存放目录 cd /data/soft #进入目录&#xff0…

【35分钟掌握金融风控策略27】贷中风控策略与客户运营体系

目录 贷中风控策略与客户运营体系 贷中风控日标 贷中风控数据源 贷中风控策略与客户运营体系 贷中是风控的第二道防线&#xff0c;贷中阶段风控的重点工作就是存量客户风控及运营。在当下&#xff0c;新客市场趋于饱和且获客成本越来越高&#xff0c;所以&#xff0c;在做好…

webpack5基础和配置

初步体验webpack打包 webpack是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口&#xff0c;将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件&#xff0c;就可以在浏览器段运行了。 1.初始化最简单的一个目录文件&#xff…

SSM整合-前后端分离-实现增删改查 (下)

主流框架SSM 实现功能03-添加家居信息需求分析/图解思路分析代码实现注意事项和细节 实现功能04-显示家居信息需求分析/图解思路分析代码实现 实现功能05-修改家居信息需求分析/图解思路分析代码实现注意事项和细节 实现功能06-删除家居信息需求分析/图解思路分析代码实现课后作…

智慧安防监控EasyCVR视频汇聚管理平台视频播放花屏的原因分析及处理

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…

解决ubuntu 暂时不能解析域名“cn.archive.ubuntu.com”问题

问题描述 E: 无法下载 http://security.ubuntu.com/ubuntu/pool/main/c/curl/curl_7.68.0-1ubuntu2.22_amd64.deb 暂时不能解析域名“cn.archive.ubuntu.com” 解决方法 sudo service network-manager stopsudo rm /var/lib/NetworkManager/NetworkManager.statesudo servi…

探讨 cs2019 c++ 的STL 库中的模板 conjunction 与 disjunction

&#xff08;1&#xff09;在 STL 库源码中这俩模板经常出现&#xff0c;用来给源码编译中的条件选择&#xff0c;模板的版本选择等提供依据。先给出其定义&#xff1a; 以及&#xff1a; 可以得出结论&#xff1a; conj 是为了查找逻辑布尔型模板参数中的第一个 false &#x…

2024CKE中国婴童展

举办地点&#xff1a;上海新国际博览中心 举办时间&#xff1a;2024年10月16-18日 同期展会&#xff1a;CTE中国玩具展、CPE中国幼教展、CLE中国授权展 展会规模&#xff1a;230,000平米 展商数量&#xff1a;2,500 参展品牌&#xff1a;5,212 …

hadoop大数据的一些知识点--Map reduce编程

实验4 MapReduce编程(2) 本实验的知识地图如图4-1所示&#xff08; 表示重点 表示难点&#xff09;。 图4-1 实验4MapReduce编程(2)知识地图 一、实验目的 1. 理解YARN体系架构。 2. 熟练掌握YARN Web UI界面的使用。 3. 掌握YARN Shell常用命令的使用。 4. 了解YARN编程之…

最新版Ceph( Reef版本) nfs导出

1 创建一个nfs集群 ceph nfs cluster create <cluster_id> [<placement>]# ceph nfs cluster create mycluster ceph-nfs-server 2. 在ceph-164,ceph-165 host建立一个高可用的nfs # ceph nfs cluster create mycluster --placementceph-164,ceph-1653. 导出nfs集群…

API低代码平台介绍3-异构数据源的数据查询功能

异构数据源的数据查询功能 在上一篇文章中我们通过API平台定义了一个最基本的数据查询接口&#xff0c;本篇文章我们将上升难度&#xff0c;在原有接口的基础上&#xff0c;实现在MySQL数据库和Oracle数据库同时进行数据查询。   什么场景会需要同时对异构数据源进行查询&…

Java——封装

要想搞明白封装&#xff0c;首先要清楚什么是 包 包的概念&#xff1a; 在面向对象的体系中&#xff0c;提出了一个软件包的概念&#xff0c;即&#xff1a;为了更好的管理类&#xff0c;把多个类收集在一起称为一组&#xff0c;称为软件包。 包的作用&#xff1a; 1、一个…

“打工搬砖记”中吃什么的轮盘功能实现(二)

文章目录 打工搬砖记转盘主要的逻辑实现转盘的素材小结 打工搬砖记 先来一个吃什么轮盘的预览图&#xff0c;这轮盘文案加字呈圆形铺出来&#xff0c;开始后旋转到指定的选项处停下来。 已上线小程序“打工人搬砖记”&#xff0c;可以扫码进行预览观看。 转盘主要的逻辑实现…

springMVC基础使用(示例)

maven依赖&#xff08;javax.servlet-api版本与spring-webmvc班恩要匹配不然会报java.lang.NoSuchMethodError: javax.servlet.http.HttpServletRespons&#xff09;&#xff1a; <dependencies><dependency><groupId>javax.servlet</groupId><arti…

Java面试题:ConcurrentHashMap

ConcurrentHashMap 一种线程安全的高效Map集合 jdk1.7之前 底层采用分段的数组链表实现 一个不可扩容的数组:segment[] 数组中的每个元素都对应一个HashEntry数组用以存放数据 当放入数据时,根据key的哈希值找到对应的segment数组下标 找到下标后就会添加一个reentrantlo…

Open AI再次定义AI PC?

从传统的文字交互&#xff0c;到语音和图像交互——Open AI再次提升了人们对AI PC的想象空间。 这种更贴近人类间交互的模式&#xff0c;会多大程度改变目前PC的生态&#xff1f; 随着苹果M4芯片、高通骁龙X的发布&#xff0c;AI PC也逐渐成为了市场热议的产品。 从各家PC厂…

OpenAI 深夜发布 GPT-4o,完全免费,强到让人恐怖,这还是AI?!又一批人将面临失业...

文章首发于公众号&#xff1a;X小鹿AI副业 大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 看了 OpenAI 最新的…

算法-卡尔曼滤波之卡尔曼滤波的其他三个方程

一维不带噪声的卡尔曼滤波方程有五个&#xff0c;下面分析剩余的三个方程&#xff1a; 分析第一个例子&#xff0c;其中测量值和真实值之间的误差属于测量误差&#xff08;使用准确性来描述&#xff09;&#xff0c;由于测量误差是随机的&#xff0c;我们可以使用方差来描述&am…