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

后台以数据流将文件返回,将文件名放在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.hqwc.cn/news/703023.html

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

相关文章

Spring注解驱动开发

1、Spring注解驱动开发图解

基于HTML5和CSS3搭建一个Web网页(一)

倘若代码中有任何问题或疑问&#xff0c;欢迎留言交流~ 网页描述 创建一个包含导航栏、主内容区域和页脚的响应式网页。 需求: 导航栏: 在页面顶部创建一个导航栏&#xff0c;包含首页、关于我们、服务和联系我们等链接。 设置导航栏样式&#xff0c;包括字体、颜色和背景颜…

量子计算机接入欧洲最快超算!芬兰加快混合架构算法开发

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1900字丨7分钟阅读 摘要&#xff1a;芬兰技术研究中心&#xff08;VTT&#xff09;与 CSC 展开合作&#xff0c;基于量子计算机超算架构进行算法开…

Windows / Linux 查看计算机支持的最大内存

该操作一般用不到&#xff0c;主要用于给计算机扩展内存用。 一、Windows 系统 WMIC 查看 WMIC&#xff08;Windows Management Instrumentation Command-line&#xff09;是一个命令行工具&#xff0c;它提供了访问 WMI &#xff08;Windows Management Instrumentation&…

Cannot read properties of undefined (reading ‘init‘)报错

出现这个报错是印象项目没有引echarts包 npm i echarts 下包 然后在main.js中引入 import echarts from echarts Vue.prototype.$echarts echarts 如果还不行 import * as echarts from echarts; 更改一下引入方式 ok了

np.linalg.norm()

np.linalg.norm()是NumPy中用于计算向量或矩阵的范数的函数。它可以计算不同类型的范数&#xff0c;包括向量的L1范数、L2范数以及矩阵的Frobenius范数等。 基本用法如下, numpy.linalg.norm(x, ordNone, axisNone, keepdimsFalse) x&#xff1a;输入数组&#xff0c;可以是…

Diffie-Hellman密钥交换协议

Diffie-Hellman也就是DH算法&#xff0c;本章我们将简单介绍一下该算法。 什么是DH算法&#xff1f; DH算法是Diffie和Hellman两位作者于1976年提出的一种密钥交换协议。它的主要用途是在非安全网络下通信双方密钥的安全建立&#xff0c;从而使通信双方能够使用这个密钥进行消…

Nginx配置文件conf解释

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Nginx(“engine x”…

佛山信息学真题 桂城-2021-五年级1.2

一、两位数&#xff08;GC4091&#xff09; GC4091 GC.2021.五年级.01.两位数http://43.139.152.26/d/DH_Trial/p/GC4091 题目描述 小明正在思考一个数学问题&#xff1a;有一个两位数&#xff0c;它的十位数大于等于个位数。现已知它的十位数和个位数之和为a&#xff0c;十位…

上海交大携手阿里巴巴成立人工智能与系统联合实验室

5 月 8 日&#xff0c;上海交通大学电子信息与电气工程学院&#xff08;简称电院&#xff09;与阿里巴巴集团宣布共同成立人工智能与系统联合实验室&#xff08;后称“联合实验室”&#xff09;&#xff0c;并在上海交大闵行校区举行了揭牌仪式。 上海交大电院副院长王贺升教授…

数字化应用标杆 | 又两家成套厂效率翻倍,利用率高达93%以上!

利驰 联能 & 利驰 俊郎 近日&#xff0c;利驰数字科技&#xff08;苏州&#xff09;有限公司&#xff08;简称利驰软件&#xff09;成功与俊郎电气有限公司&#xff08;简称俊郎电气&#xff09;、浙江联能电气有限公司&#xff08;简称联能电气&#xff09;成功确立了数字…

css 步骤条虚线渐变色效果实现

效果如图所示&#xff1a; 思路&#xff1a; 使用元素覆盖的方式实现视觉上虚线的效果 实现代码&#xff1a; html布局 <ul class"details-cont"><li class"details-li" v-for"item in 3" :key"item"><div class&qu…