使用<a>标签进行文件下载出现文件名称乱码、文件名变下划线

news2024/11/24 18:41:09

在使用a标签下载文件时出现了如图所示文件名称显示错误,原因是因为文件中包含中文导致乱码

解决方法使用axios配合Blob,如果项目中没有安装或者不想安装axios使用Ajax跟fetch也是一样可以解决:

 使用axios(记得引入axios)

    let downloadURL = `${baseUrl}${url}?${tokenHeader}=${accessToken}`;//文件地址
  axios
        .get(downloadURL, { responseType: "blob" })//设置相应格式为blob
        .then((response) => {
        //   window.URL.createObjectURL() 是浏览器提供的一个用于创建对象URL的方法。
        // 它的主要作用是:
        // - 将一个文件对象或 Blob 对象生成一个临时的URL。
        // - 这个URL的生命周期与当前文档绑定,可以在文档任意位置访问生成的对象内容。
        // - 常用于将文件对象或 Blob 引用传入需要 URL 的场景中,如下载、显示预览等。
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", name);//name为文件名称
          document.body.appendChild(link);
          link.click();
          link.remove();//下载完将添加的临时节点删除
        })
        .catch((error) => {
          console.error(error);
        });

使用fetch下载

const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });

Ajax原理也是一样的转blob后下载

最后附上下载后的文件:

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

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

相关文章

JJJ:PCI / PCIE 的一些术语和概念

转发事务和非转发事务 在PCIe(Peripheral Component Interconnect Express)总线中,存在两种类型的事务:转发事务和非转发事务。 1、转发事务(Forwarded Transactions):转发事务是指从一个PCIe…

openvpn使用

如何使用OpenVPN搭建局域安全网_宝塔搭建vpn_幸识SQ的博客-CSDN博客 OpenVPN在CentOS7中最简单的搭建局域网_哔哩哔哩_bilibili 最终的效果是,如果安装好服务端后,会生成一个文件,要用到客户端。 客户端安装后,会多个IP 这样&…

关于unity中 编辑器相关逻辑的记录

prefab 在场景中 , 用这个方法可以获取它的磁盘路径: [MenuItem("Gq_Tools/↓获取prefab路径")] public static void SaveDecalParameters() { var objs Selection.objects; var obj objs[0] as GameObject; Object parentObject Prefab…

Amazon MSK 基于 S3 的数据导出、导入、备份、还原、迁移方案

Amazon MSK(Amazon Managed Streaming for Apache Kafka)是 Amazon 云平台提供的托管 Kafka 服务。在系统升级或迁移时,用户常常需要将一个 Amazon MSK 集群中的数据导出(备份),然后在新集群或另一个集群中…

Linux之打印函数调用依赖关系(六十一)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

extractvalue报错注入理论及实战

报错注入 什么是报错注入 构造语句,让错误信息中夹杂可以显示数据库内容的查询语句,返回报错提示中包括数据库中的内容 如上图所示,通过group by的报错,我们可以知道列数是多少 输入正确的查询数据库的SQL语句,虽然可…

理解交叉熵(Cross Entropy)

交叉熵(Cross-Entropy)是一种用于衡量两个概率分布之间的距离或相似性的度量方法。在机器学习中,交叉熵通常用于损失函数,用于评估模型的预测结果与实际标签之间的差异。 在分类问题中,交叉熵损失函数通常用于多分类问…

如何在公文套红过程中设置页码

zOffice的套红功能,是把源文件套入到公文模版的书签中去,将两个文件合成一个,那么源文件的一些设置可能会保留也可能会被重置,那么如何在公文套红中保留页码设置呢?当然是通过zOffice丰富的SDK接口来实现控制了&#x…

WebGL软件项目类型

WebGL(Web Graphics Library)是一种用于在Web浏览器中渲染3D和2D图形的JavaScript API。它提供了强大的能力,可以用于开发各种类型的项目,包括但不限于以下几种,希望对大家有所帮助。北京木奇移动技术有限公司&#xf…

Vue 3 中,watch 和 watchEffect 的区别

结论先行: watch 和 watchEffect 都是监听器,都是用来监听响应式数据的变化并执行相应操作。区别是: watch:需要指明要监听的数据,而且在回调函数中可以获取到属性变化的前后值; 适用于需要精确控制监视…

学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能

学习在echarts中优化数据视图dataView样式 带表格样式 toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下: 像这种标题跟数据没有整齐对应上,看起来乱 改问题解决方案为,option 》…

IO多路复用 Linux C Server-Client 多用户聊天系统

目录 Server-Client mutiplexingServer mutiplexingClient mutiplexing Server-Client 在Linux系统中,IO多路复用是一种机制,它允许一个进程能够监视多个文件描述符(sockets、pipes等)的可读、可写和异常等事件。这样&#xf…

6-会话、过滤器、监听器

6-会话、过滤器、监听器 文章目录 6-会话、过滤器、监听器会话会话概述为什么需要会话管理会话管理实现的手段 Cookie概述使用时效设置路径设置:特定请求才携带cookie SessionHttpSession的概述HttpSession的使用HttpSession的使用-getSession()方法原理HttpSession…

Django快速指南

开始构建 Web 应用程序不仅需要对编码和设计原则有深入的了解,还需要对安全性和性能坚定不移的承诺。在数字化存在至关重要的时代,构建强大而高效的在线平台的能力是一项具有不可估量价值的技能。本教程专门面向网络工匠,即那些希望将技术线索…

提高 bbr 的灵敏性

bbr draft 给出了 MaxBwFilterLen 的定义: MaxBwFilterLen: The filter window length for BBR.MaxBwFilter 2 (representing up to 2 ProbeBW cycles, the current cycle and the previous full cycle). 从 v1 到 v3 版本,该值均只跟状态机而不跟实际&…

#龙迅视频转换IC LT7911D是一款高性能Type-C/DP/EDP 转MIPI®DSI/CSI/LVDS 芯片,适用于VR/显示应用。

1.说明 应用功能:LT7911D适用于DP1.2转MIPIDSI/MIPICSI/LVDS,EDP转MIPIDSI/MIPICSI/LVDS,TYPE-C转MIPIDSI/MIPICSI/LVDS应用方案 分辨率:单PORT高达4K30HZ,双PORT高达4K 60HZ 工作温度范围:−40C to 85C 产…

Discourse 如何在 header 上添加 HTML

虽然现在大部分网站都开始支持使用 CDN 的网站校验了。 但还有些网站在你需要他们提供服务的时候要求使用 header 的 meta 数据校验。 Discourse 是可以轻松的实现上面的功能的。 添加方法 选择你的 Discourse 网站下的自定义。 然后在左侧选择你需要添加的主题。 为了方便…

【EI会议征稿】第三届电气、电力与电网系统国际会议(ICEPGS 2024)

第三届电气、电力与电网系统国际会议(ICEPGS 2024) 2024 3rd International Conference on Electrical, Power and Grid Systems 第三届电气、电力与电网系统国际会议(ICEPGS 2024)将于2024年1月26-28日在马来西亚吉隆坡隆重举行…

计算机毕业设计 基于SpringBoot的私人西服定制系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

【hexo博客配置】hexo icarus主题配置

配置icarus 步骤一:下载icarus github网址:[hexo-theme-icarus](ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo. (github.com)) 可以从这个网址上下载zip文件,解压后&#xff0c…