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'), '')

结束!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智游剪辑1.5.0发布!

智游剪辑1.5.0发布了&#xff0c;快来看看更新了啥功能吧&#xff01; 主页卡片升级 现在功能卡片新增图标&#xff0c;比以前更好看更直观 我的收藏 遇到自己喜欢的功能直接点击收藏就可以了&#xff0c;后面我们就能快速找到这个功能 批量ncm转mp3功能 目前看后台有很多人…

【源头活水】顶刊解读!IEEE T-PAMI (CCF-A,IF 23.6)2024年46卷第二期

“问渠那得清如许&#xff0c;为有源头活水来”&#xff0c;通过前沿领域知识的学习&#xff0c;从其他研究领域得到启发&#xff0c;对研究问题的本质有更清晰的认识和理解&#xff0c;是自我提高的不竭源泉。为此&#xff0c;我们特别精选论文阅读笔记&#xff0c;开辟“源头…

2024江苏省赛 H. 完蛋,我被房产包围了 【费用流、分时图】

完蛋&#xff0c;我被房产包围了 n ≤ 200 , ∑ n ≤ 1 0 4 n \leq 200, \sum n \leq 10^4 n≤200,∑n≤104 求出最大利润 思路 每个代理商每次买房狂潮只能卖出 1 1 1 套房子&#xff0c;小红卖出一套房子贬值 1 1 1 元&#xff0c;小绿卖出一套房子贬值 ⌈ a i 10 ⌉ \…

vue3专栏项目 -- 五、权限管理(下)

1、创建Message组件 前面我们获取到了请求错误的信息&#xff0c;所以我们接下来做一个弹出框组件&#xff0c;让错误提示展示出来 我们把这个组件做成一个全局组件&#xff0c;它不仅可以显示错误的信息&#xff0c;还可以添加成功操作的信息&#xff0c;甚至还可以显示一个…

C# OpenCvSharp Demo - 最大内接圆

C# OpenCvSharp Demo - 最大内接圆 目录 效果 项目 代码 下载 效果 项目 代码 using OpenCvSharp; using System; using System.Diagnostics; using System.Drawing; using System.Drawing.Imaging; using System.Linq; using System.Windows.Forms; namespace OpenCvSh…

算法day07

第一题 30. 串联所有单词的子串 上题题意如下&#xff1a; 将w数组里面的字符串随机排列&#xff0c;只要在s字符串中找到相对应的w组成的字符串&#xff0c;则返回s中对应字符串首位元素的第一个下标&#xff1b; 有上述题意所知&#xff0c;解题思路如上一题故事&#xff0c…

React搭建-Next 学习-1

创建一个 Next.js 应用,node版本要高&#xff0c;16.5以上 npm淘宝镜像切为https://registry.npmmirror.com npm config set registry https://registry.npmmirror.com npx create-next-applatest//安装后 使用npm run dev 启动 Next.js 是围绕着 页面&#xff08;pages&am…

如何启用WooCommerce商城快捷结帐:3 种简单方法

使用WooCommerce商城快捷结帐可帮助您提高商店的转化率。 70%的顾客同意在线商店的快速结账流程会鼓励他们完成购买。 在结账过程中您让购物者完成的步骤越多&#xff0c;他们完成该流程的可能性就越小。 解决方案是什么&#xff1f; 通过跳过默认的WooCommerce商城购物车页…

怎么看电脑是固态还是机械硬盘?数据丢失怎么办

在数字化时代&#xff0c;电脑硬盘作为数据存储的核心部件&#xff0c;其类型直接关系到数据读写速度和存储效率。固态硬盘&#xff08;SSD&#xff09;与机械硬盘&#xff08;HDD&#xff09;作为目前市场上主流的两种硬盘类型&#xff0c;各有其优缺点。然而&#xff0c;对于…

【LeetCode刷题】27. 移除元素

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 27. 移除元素 2. 题目描述 3. 解题方法 暴力法直接解决&#xff0c;用双层for循环&#xff0c;外层for循环找val&#xff0c;内层for循环做删除操作。双指针法&#xff0c;fast和slow。fast找不是val的值&#xff0c;…

网站如何启用HTTPS访问

在互联网的世界里&#xff0c;数据安全已经成为了每个网站和用户都不得不面对的问题。近期&#xff0c;网络信息泄露事件频发&#xff0c;让越来越多的网站开始重视起用户数据的安全性&#xff0c;因此启用HTTPS访问成为了一个热门话题。作为一名网络安全专家&#xff0c;我希望…

【C语言习题】6.逆序输出

文章目录 1.描述输入描述&#xff1a;输出描述&#xff1a;示例图&#xff1a; 2.解题思路3.具体代码4.代码讲解 1.描述 输入10个整数&#xff0c;要求按输入时的逆序把这10个数打印出来。逆序输出&#xff0c;就是按照输入相反的顺序打印这10个数。 输入描述&#xff1a; 一…

实战| 手把手教你实现俯卧撑实时计数:OpenCV+MediaPipe

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

《五》Word文件编辑软件调试及测试

上一期&#xff0c;我们已经把大致的框架给完成了&#xff0c;那么今天&#xff0c;我们就把剩下的什么复制啊&#xff0c;改变字体啊什么的给做一下。 那我们就一步一步的来就可以了&#xff1a; 新建word&#xff1a; void MyWord::fileNew() {qDebug()<<"hhh&…

在不同的应用系统创建Python虚拟环境

在不同的应用系统创建Python虚拟环境 在Linux上创建Python虚拟环境 一、在Ubuntu上创建Python虚拟环境 可以通过使用virtualenv工具来完成。下面是创建Python虚拟环境的步骤&#xff1a; 首先确保已经安装了python3-venv包&#xff08;如果没有安装&#xff0c;则需要运行命…

产品经理如何进行项目管理?

产品经理如何进行项目管理&#xff1f; 项目管理和产品管理在本质上还是有一定差别的。产品更关注的是产品、功能、方向和反馈&#xff0c;而项目则更关注进度、质量和测试等。如果团队没有项目经理&#xff0c;那么产品经理就需要兼顾对开发人员、项目进度等进行管理。 此时…

声纹识别在无人机探测上的应用

无人机在民用和军事领域的应用越来越广泛。然而&#xff0c;随着无人机数量的增加&#xff0c;"黑飞"现象也日益严重&#xff0c;对公共安全和隐私构成了威胁。因此&#xff0c;开发有效的无人机探测与识别技术变得尤为重要。及时发现黑飞无人机的存在进而对其型号进…

软考-下午题-试题一

1、概念 2、答题技巧和规范 问题1、2&#xff1a;直接看 格式&#xff1a; 问题3&#xff1a; 格式&#xff1a; 3、例题 eg2&#xff1a;可以以后写完问题4之后&#xff0c;把问题3补充完整 问题4&#xff1a; 问题4 官方解释&#xff1a; 问题4&#xff08;3‘&#xff09; 2…

AI智能对话绘画二合一系统源码 在线生成绘画 带完整的源代码包以及搭建教程

系统概述 AI智能对话绘画二合一系统源码是一款集成了自然语言处理、深度学习、计算机视觉等多种技术的智能系统。该系统通过强大的自然语言处理能力&#xff0c;能够与用户进行流畅的AI对话&#xff0c;无论是创作构思、风格选择还是技巧咨询&#xff0c;系统都能给出精准的建…

7集成学习评分卡

集成学习评分卡 学习目标 知道LightGBM基本原理掌握使用lightGBM进行特征筛选的方法1 Gradient Boosting算法回顾 Gradient Boosting 基本原理 训练一个模型m1,产生错误e1针对e1训练一个模型m2,产生错误e2针对e2训练第三个模型m3,产生错误e3 …最终预测结果是:m1+m2+m3+…GB…