浏览器a标签下载txt、json文件自动打开预览的问题

news/2024/10/21 6:18:02/

背景

由于浏览器的特性.txt .pdf .json 等等文件放在a标签的href属性中会被浏览器直接打开,这时可以给a添加download属性强制下载,但是当执行 跨域下载 文件时download属性就会失效。

解决办法

跨域会导致download属性失效,使用xhr下载方式。

javascript">export default function download(url, fileName) {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.responseType = 'blob'xhr.onload = () => {const url = window.URL.createObjectURL(xhr.response)createAndRemove(url, fileName)}xhr.send()}function createAndRemove(url, fileName) {// 创建隐藏的可下载链接var eleLink = document.createElement('a');eleLink.download = fileName;eleLink.style.display = 'none';// 下载内容转变成blob地址eleLink.href = url;// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);}

http://www.ppmy.cn/news/1458712.html

相关文章

关于位操作符的实际应用<C语言>

前言 位操作符在C语言初学阶段相对其他操作符来说,是一种难度比较大的操作符,且运用较少的一类操作符,但是位操作符并不是“一无是处”,合理运用的位操作符,在某些场景下可以优化算法,提高代码的执行效率&a…

tftp 服务部署

这个服务挺简单的,但是今天用到了,还是写一下把 简单文件传输协议(Trivial File Transfer Protocol,TFTP)是一种基于 UDP 协议在客户端 和服务器之间进行简单文件传输的协议。顾名思义,它提供不复杂、开销不…

【Redis7】10大数据类型之Set类型

文章目录 1.Set类型2.常用命令:3.示例3.1 SADD,SMEMBERS和SISMEMBER3.2 SREM和SCARD3.3 SRANDMEMBER和SPOP3.4 SMOVE 4.集合运算相关命令4.1 集合交集 (SINTER)4.2 集合并集 (SUNION)4.3 集合差集 (SDIFF)4.4 Redis7新命令sintercard 1.Set类型 Redis的Set类型是一…

如何使用ArcGIS Pro进行选房分析

无论是研究城市规划布局还是寻找理想的住房,都需要综合考虑购物、医疗、教育和休闲等多方面因素,此时我们的GIS软件就可以派上用场了,这里为大家介绍一下如何使用 ArcGIS Pro 进行选房分析,希望能对你有所帮助。 数据来源 教程所…

【Java】还不会数组?一文万字全搞定

前言:前面两章我们详细讲解了Java基本程序设计结构中的基本知识,,包括:一个简单的Java应用,注释,数据类型,变量与常量,运算符,字符串,输入输出,控…

1707jsp电影视频网站系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 校园商城派送系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统采用web模式,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数…

SQL注入基础-5

一、Access注入 1、asp网站常用数据库:access,mssql 2、access数据库 (1)没有库,没有端口 (2)结构:表--》字段--》数据 3、注入流程: 判断类型判断表名:遍历、爆破判断列名判断列名下的数据长度查出数…

MySQL-数据结构(索引)选择的合理性

MySQL衡量查询效率的标准就是磁盘IO次数(对索引的使用效率至关重要)加速查找速度的数据结构,基本分为以下两类: 树,增删改查的平均时间复杂度都是O(log2N)哈希(hash),增删改查的平均…