前端js下载文件时后缀名多出一个下划线(已解决)

news2024/9/28 1:17:20

问题:前端js下载文件时后缀名多出一个下划线

在打印的时候发现文件名啥啥啥的都没问题,创建的元素似乎也没问题。

但是呢结果?多了个下划线。

原因

细心的你可能发现了a标签的download的内容是双层双引号。具体原因可能是谷歌浏览器做了安全处理吧(瞎猜的)。不过我在火狐是测试是正常的。
在这里插入图片描述

解决方法

将文件名称的双引号去掉即可fileName.replace(new RegExp(’"’, ‘g’), ‘’)

    exportFile(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url: `${url}`,
                params: params,
                headers: {
                    ...this.setProjectHeader(url),
                    'Content-Type': 'application/json;charset=utf-8'
                },
                responseType: 'blob'
            })
                .then((res) => {
                    let data = res.data
                    // 文件名
                    let fileName = decodeURI(escape(res.headers['content-disposition'].split('=')[1]))
                    // 文件类型
                    const type = fileName.split('.')[1]
                    let blob = new Blob([data], { type: `application/${type}.ms-excel;charset=utf-8` })
                    let downloadElement = document.createElement('a')
                    // 创建下载的链接
                    let href = window.URL.createObjectURL(blob)
                    downloadElement.href = href
                    // 下载后文件名
                    downloadElement.download = fileName.replace(new RegExp('"', 'g'), '')
                    document.body.appendChild(downloadElement)
                    downloadElement.click()
                    document.body.removeChild(downloadElement)
                    // 释放掉blob对象
                    window.URL.revokeObjectURL(href)
                })
                .catch((err) => {
                    reject(err.data)
                })
        })
    },

转自:前端js下载文件时后缀名多出一个下划线(已解决)_下载的文件前后有下横线-CSDN博客

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

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

相关文章

解读 Story Protocol:IP 与区块链的潜力与障碍

撰文:100y.eth 编译:J1N,Techub News 8 月,据 The Block 报道,专注于知识产权(IP)的区块链 Story 宣布完成 a16z Crypto 领投 8000 万美元 B 轮融资,参投方包括 Polychain Capital&…

VBA技术资料MF204:右键多按钮弹出菜单中使用图标

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

MySQL常见面试总结

MySQL基础 什么是关系型数据库? 顾名思义,关系型数据库(RDB,Relational Database)就是一种建立在关系模型的基础上的数据库。关系模型表明了数据库中所存储的数据之间的联系(一对一、一对多、多对多&…

【大数据】元数据是解锁数据价值的关键

在信息爆炸的数字时代,数据无处不在,它以多种形式存在,从文本文档到数字图片,从交易记录到科学测量。然而,如果没有合适的数据管理和理解,这些数据的价值就会大打折扣。如何提高数据价值呢?这就…

IDA Pro基本使用

IDA Pro基本使用 1.DllMain的地址是什么? 打开默认在的位置1000D02E就是DllMain地址 按空格键可以看到图形化界面选择options、general勾选对应的选项在图像化也能看到 2.使用Imports 窗口并浏览到 gethostbyname,导入函数定位到什么地址? 这里可以打开Impo…

2024 Python3.10 系统入门+进阶(十六):正则表达式

目录 一、认识正则表达式二、正则表达式基本语法2.1 行界定符2.2 单词定界符2.3 字符类2.4 选择符2.5 范围符2.6 排除符2.7 限定符2.8 任意字符2.9 转义字符2.10 反斜杠2.11 小括号2.11.1 定义独立单元2.11.2 分组 2.12 反向引用2.13 特殊构造2.14 匹配模式 三、re模块3.1 comp…

文件防泄密措施有哪些?教你10个权威方法,有效防止文件泄密!【聚焦职场安全】

【聚焦职场安全】数字化办公,文件防泄密已成为企业不可忽视的重要环节。 文件泄密不仅会导致企业核心竞争力的丧失,还可能引发法律纠纷和经济损失。 接下来,我将为您揭晓10个权威且实用的文件防泄密措施,这些方法简单易行&#…

斯坦福STANFORD RESEARCH SR860 DSP 锁相放大器SR830

斯坦福研究 SR860 具有无与伦比的模拟性能、先进的新型数字信号处理功能、完全现代、直观的用户界面以及广泛的计算机连接选项,是任何同步检测应用的理想选择。从消除开关模式噪声的重型环形变压器到将锁定功能带入手机的 iOS 连接,再到可消除更多噪声并…

DrawDB本地Windows环境部署结合内网穿透远程设计数据库

文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 我们在开发项目时很多时候都会使用到数据库,所以选择一个好用的数据库设计工具会让工作效率翻倍。在当今数字化时代,数据库管理是许多企业…

超全攻略,教你验证第三方电子合同平台的真伪

不了解电子合同不用担心,通过本篇文章,您可以深入了解电子合同以及第三方平台有效性。 如何辨别第三方电子合同平台的真伪,可以从合法性、技术安全、平台、功能、服务等几个方面入手: 1.合法性方面: 资质认证&#…

Azure Kinect 人体跟踪关节

Azure Kinect 人体跟踪关节 azure kinect dk 提取人体骨骼 要在Azure Kinect DK上提取人体骨骼,你需要使用Azure Kinect SDK和OpenPose库。以下是一个简化的代码示例,展示如何集成这两个库来提取骨骼关键点: 首先,确保你已经安装…

linux 下域名解析错误

本文参考这里 作者:程序那点事儿 日期:2024/01/31 16:25 ping raw.githubusercontent.com,ping这个域名时,发现返回的是本地ip 原因是,配置了本地网关地址 192.168.xx.1 用命令查看默认网卡的网关:nmcli …

刷题训练之队列与宽搜

> 作者:დ旧言~ > 座右铭:松树千年终是朽,槿花一日自为荣。 > 目标:熟练掌握字符串算法。 > 毒鸡汤:学习,学习,再学习 ! 学,然后知不足。 > 专栏选自:刷题…

【PyTorch实战·1】多模态图片生成(文心一言大模型)

🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏:PyTorch实战_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步,十二点的黑夜遮蔽不住黎明的曙光 🏀 专栏持续更新中~…

信安 实验1 用Wireshark分析典型TCP/IP体系中的协议

实验1 用Wireshark分析典型TCP/IP体系中的协议 实验目的 通过Wireshark软件分析典型网络协议数据包,理解典型协议格式和存在的问题,为后续学习和相关实验打下基础。 实验内容 (1)安装Wireshark,熟悉功能菜单。 &…

「空间智能」跨越维度壁垒 - 构筑AI驱动的XR元宇宙

引言 在AI和XR技术快速融合的背景下,一场由「空间智能」(Spatial Intelligence)引领的革命正在悄然展开,为元宇宙的发展注入新的动力。这场革命的核心推动者之一,是由"AI教母"李飞飞领导的World Labs。Wor…

Diffusers Image Outpaint - AI一键扩图工具 本地整合包下载

Diffusers Image Outpaint 是一个基于扩散模型的图像外延技术,它能够根据已有的图像内容,生成图像的额外部分。 它通过先进的机器学习算法,使得图像生成更加自然和逼真,为用户提供了一种创新的图像处理方式。该工具基于Realvist V…

【linux-Day5】Linux权限

【linux-Day5】Linux权限 linux用户用户分类su:用户之间进行切换exit/ctrld:退出当前账户/回退到上一个登录账户 权限和文件sudo:暂时提高用户对指令操作的权限Linux权限身份目标文件属性文件的权限表示修改文件的权限chmod:设置文…

高级自动化测试常见面试题(Web、App、接口)

一、Web自动化测试 1.Selenium中hidden或者是display = none的元素是否可以定位到? 不能,可以写JavaScript将标签中的hidden先改为0,再定位元素 2.Selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以…

黄子恒的传奇故事

从社会小白到传奇人物,需要经过怎样的历练过程?每一份成功与辉煌都并非偶然,只有经过千百次的锤炼,才能如钢铁般更硬更强。我们的主人公——黄子恒,正是通过不断奋斗逆袭,蜕变成如今的演讲家,用…