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.mzph.cn/pingmian/12430.shtml

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

相关文章

【Linux取经路】进程通信之匿名管道

文章目录 一、进程间通信介绍1.1 进程间通信是什么&#xff1f;1.2 进程间通信的目的1.3 进程通信该如何实现 二、管道2.1 匿名管道2.1.1 站在文件描述符角度深入理解管道2.1.2 接口使用2.1.3 PIPE_BUFFER 和 Pipe capacity2.1.4 管道中的四种情况2.1.5 管道特征总结 2.2 匿名管…

只用了三天就入门了Vue3?

"真的我学Vue3&#xff0c;只是为了完成JAVA课设" 环境配置 使用Vue3要去先下载Node.js。 就像用Python离不开pip包管理器一样。 Node.js — Run JavaScript Everywhere (nodejs.org) 下完Node.js去学习怎么使用npm包管理器&#xff0c;放心你只需要学一些基础的…

【MARIE】嵌入式系统设计半期报告:MARIE模拟器的使用

1.模拟器介绍 1.1 体系结构 MARIE &#xff08;Machine Architecture that is Really Intuitive and Easy&#xff09; 是一种机器架构和汇编语言。发布者还为机器提供了一组用 Java 编写的模拟器程序。MARIE.js 是 MARIE 的 JavaScript 版本实现。它旨在尽可能忠实于原始 Ja…

基于EKF扩展卡尔曼滤波的一阶环形倒立摆控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于EKF扩展卡尔曼滤波的一阶环形倒立摆控制系统simulink建模与仿真。基于扩展卡尔曼滤波&#xff08;Extended Kalman Filter, EKF&#xff09;的一阶环形倒立摆控制系统&…

【并发程序设计】4. exec函数族

4.exec函数族 exec函数族是一组用于在进程中启动另一个程序来替换当前进程的函数。 exec函数族主要用于在当前进程内部执行一个新的程序&#xff0c;而不会创建新的进程。 子进程调用exec函数&#xff0c;族父进程不受影响。进程当前内容被指定的程序替换&#xff0c;但进程…

【YOLOV5 入门】——Gradio搭建Web GUI

引入&#xff1a;上节搭建的UI可视化界面只能以运行程序弹出窗口的形式运行&#xff0c;不能在网页Web中使用&#xff0c;本次代码将会非常少&#xff01; 一、Gradio简介与安装 Gradio 是一个用于构建机器学习模型演示界面和Web应用的开源库。提供了简单易用的界面&#xff0…

云端的艺术革命:云渲染如何重塑动画与视觉特效产业

在 2019 年&#xff0c;乔恩费儒&#xff08;Jon Favreau&#xff09;决定重拍迪士尼的经典电影《狮子王》。他的创新构想是以真实动物为模型&#xff0c;在非洲草原上拍摄&#xff0c;由真实动物“出演”的辛巴和其他角色&#xff0c;随后通过配音赋予它们生命。 为了实现这一…

janus源码分析(1)--代码结构整理

基础说明 janus官网 https://janus.conf.meetecho.com/index.html janus源码地址 https://github.com/meetecho/janus-gateway 编译及部署参考 https://pro-hnb.blog.csdn.net/article/details/137730389?spm1001.2014.3001.5502 https://pro-hnb.blog.csdn.net/article/deta…

【Python探索之旅】列表

目录 特点 入门 访问元素 新增元素 修改元素 插入元素 删除元素 完结撒花 前言 在Python中&#xff0c;列表(List)是最常用的数据结构之一&#xff0c;类似于其他语言&#xff0c;如Java&#xff0c;与其不同啊Python中不需要声明数据类型。它提供了一种灵活且高效的方式…

Linux-线程

目录 1. 线程概念 2. 线程vs进程 3. 线程的优缺点 4. 线程创建 4.1 pthread_create 4.2 pthread_self 5. 线程终止 5.1 return 5.2 pthread_exit 5.3 pthread_cancel 6. 线程等待 7. 线程分离 1. 线程概念 线程&#xff1a;轻量级进程&#xff0c;在进程内部执行&a…

谷歌Gemini时代来了!加固搜索护城河、赋能全家桶,Gemini 1.5 Pro升级至200万token

3 月中旬&#xff0c;谷歌宣布 Google I/O 定档北京时间 5 月 15 日凌晨 1 点。而当大会开幕时间临近&#xff0c;本应是讨论度最高的时候&#xff0c;「宿敌」OpenAI 却半路杀出&#xff0c;抢先一天&#xff0c;仅耗时 27 分钟就发布了颠覆性巨作 GPT-4o&#xff0c;将新一轮…

PyTorch中定义自己的数据集

文章目录 1. 简介2. 查看PyTorch自带的数据集(可视化)3. 准备材料3.1 图片数据3.2 标签数据 4. 方法 1. 简介 尽管PyTorch提供了许多自带的数据集&#xff0c;如MNIST、CIFAR-10、ImageNet等&#xff0c;但它们对于没有经验的用户来说&#xff0c;理解数据加载器的工作原理以及…

【启程Golang之旅】环境设置、工具安装与代码实践

欢迎来到Golang的世界&#xff01;在当今快节奏的软件开发领域&#xff0c;选择一种高效、简洁的编程语言至关重要。而在这方面&#xff0c;Golang&#xff08;又称Go&#xff09;无疑是一个备受瞩目的选择。在本文中&#xff0c;带领您探索Golang的世界&#xff0c;一步步地了…

【Web后端】MVC模式

1、简介 MVC模式&#xff0c;全称Model-View-Controller&#xff08;模型-视图-控制器&#xff09;模式&#xff0c;是一种软件设计典范&#xff0c;它将应用程序的用户界面&#xff08;视图&#xff09;和业务逻辑&#xff08;模型&#xff09;分离&#xff0c;同时提供了一个…

K8S内容

K8S介绍 1、故障迁移:当某一个node节点关机或挂掉后&#xff0c;node节点上的服务会自动转移到另一个node节点上&#xff0c;这个过程所有服务不中断。这是docker或普通云主机是不能做到的 2、资源调度:当node节点上的cpu、内存不够用的时候&#xff0c;可以扩充node节点&…

​​​【收录 Hello 算法】6.2 哈希冲突

目录 6.2 哈希冲突 6.2.1 链式地址 6.2.2 开放寻址 1. 线性探测 2. 平方探测 3. 多次哈希 6.2.3 编程语言的选择 6.2 哈希冲突 上一节提到&#xff0c;通常情况下哈希函数的输入空间远大于输出空间&#xff0c;因此理论上哈希冲突是不可避免的。比如&a…

LeetCode题练习与总结:不同的二叉搜索树--96

一、题目描述 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5示例 2&#xff1a; 输入&#xff1a;n 1 输出&…

从需求角度介绍PasteSpider(K8S平替部署工具)

你是否被K8S的强大而吸引&#xff0c;我相信一部分人是被那复杂的配置和各种专业知识而劝退&#xff0c;应该还有一部分人是因为K8S太吃资源而放手&#xff01; PasteSpider是一款使用c#编写的linux容器部署工具&#xff0c;简单易上手&#xff0c;非常节省资源&#xff0c;支持…

shell脚本实现linux系统自动化配置免密互信

目录 背景脚本功能脚本内容及使用方法 1.背景 进行linux自动化运维时需要先配置免密&#xff0c;但某些特定场景下&#xff0c;做了互信的节点需要取消免密&#xff0c;若集群庞大节点数量多时&#xff0c;节点两两之间做互信操作非常麻烦&#xff0c;比如有五个节点&#x…

C++——动态规划

公共子序列问题 ~待补充 最长公共子序列 对于两个字符串A和B&#xff0c;A的前i位和B的前j位的最大公共子序列必然是所求解的一部分&#xff0c;设dp[i][j]为串A前i位和B串前j位的最长公共子序列的长度&#xff0c;则所求答案为dp[n][m]&#xff0c;其中n&#xff0c;m分别为…