reactjs前端实现文件新窗口下载

前端实现文件新窗口下载，防止文件被浏览器打开

前情
方法一：使用HTML的a标签
方法二：使用XMLHttpRequest对象
方法三：在服务端的响应头中加入字段（最优解）

前情

如果直接使用HTML的a标签，并且将下载链接放在a标签的href中，会导致原浏览器窗口直接被下载链接覆盖

方法一：使用HTML的a标签

在href中放入下载链接

设置download属性，download属性将会指定下载内容的标题。如果没有下载内容的标题时，可以通过url获得文件标题，具体处理函数贴在下面如getFileName()
有些情况下仅仅使用download属性不会生效，可以再加上一个target属性，具体原因暂时不明

注意：此种方法仅适用于链接地址同源的情况下，如果是第三方链接，那么这种方法就不生效了

<a href="http://xxx.xx/xxx.txt" download={this.getFileName("http://xxx.xx/xxx.txt")} target="_blank">

  getFileName(url) {var num = url.lastIndexOf('/')+1var fileName = url.substring(num)//把参数和文件名分割开fileName = decodeURI(fileName.split("?")[0]);return fileName;}

方法二：使用XMLHttpRequest对象

在a标签加入onClick函数，并通过XMLHttpRequest新建下载任务

注意：此方法似乎不适用于iOS操作系统，另外链接为第三方的情况下可能会出现跨域

  downloadFile(downloadURL) {var request = new XMLHttpRequest();let fileName = this.getFileName(downloadURL);request.open("GET", downloadURL);request.setRequestHeader("Content-Disposition","attachment;filename="+fileName); //定义下载文件名称request.onload = function () {var url = window.URL.createObjectURL(this.response);var a = document.createElement("a");document.body.appendChild(a);a.href = url;a.download = fileNamea.click();}request.send();}

方法三：在服务端的响应头中加入字段（最优解）

这个情况还有一种相对简便的做法，其实只需要服务端在他们的响应头中加入这个字段即可：
Content-Disposition: attachment; filename=“xxx.txt”

reactjs前端实现文件新窗口下载相关推荐

a标签实现文件、图片下载和打开新窗口
a标签实现文件.图片下载 a标签实现文件或图片下载只需要设置 download="" 属性即可,该属性的值可以为空,如果设置值,则该值就将是文件下载的默认名字. <a her ...
Java实现导出多个excel表打包到zip文件中，供客户端另存为窗口下载
文章目录一.业务背景二.实现思路二.准备工作 1.准备data模板.xlsx 2.引入poi相关依赖,用于操作excel 3.针对WorkBook+ZIP压缩输入/输出流,相关方法知识点要有所了 ...
html中怎么在新窗口打开文件夹,如何解决文件夹总是在新窗口打开三种办法解决文件夹总是在新窗口打开...
之前用电脑打开文件夹时,都是在同一窗口,很方便,但是,不知何故,每次打开文件夹时,都会创建一个新窗口,如果文件路径很短,还只有二三个窗口,如果路径很长,要打开七八个窗口,甚至更多,而且后面还要一个一个 ...
计算机窗口总是新窗口打开,如何解决文件夹总是在新窗口打开三种办法解决文件夹总是在新窗口打开...
之前用电脑打开文件夹时,都是在同一窗口,很方便,但是,不知何故,每次打开文件夹时,都会创建一个新窗口,如果文件路径很短,还只有二三个窗口,如果路径很长,要打开七八个窗口,甚至更多,而且后面还要一个一个 ...
前端大文件上传和下载（分片上传）
前端大文件上传和下载(分片上传) 一.问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件 ...
SharePoint文档库，如何在新窗口打开中的文件
默认情况下,点击文档库中的文件是在当前浏览器中打开的(如果你设置的是在客户端软件打开,则不符合本文情况).那么如果让他在新窗口中打开呢? 这里需要借助jQuery,关于如何将jQuery集成到Shar ...
重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件...
重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件原文:重新想象 Windows 8.1 Store Apps (89) - 通信 ...
设置苹果电脑vsode在新窗口中打开文件
0.前言最近切换到mac电脑工作,又得重新安装一些工具软件并设置.虽然这些设置并表示啥复杂的设置,但是久了不设置还是会忘记.于是记录之,也希望给能帮助到需要的人. 我们使用vscode阅读或者编辑文 ...
vue，下载导出文件，开新窗口导出
vue,下载导出文件,开新窗口导出封装设置url参数方法 //设置url参数 //setUrlPrmt({'a':1,'b':2}) //显示 a=1&b=2 setUrlPrmt(obj ...
文件夹总是在新窗口打开
系统是WIN7,文件夹选项中叶设置了在同一窗口打开.但是打开文件夹时,总是在新窗口中打开.正常的应该是在原窗口中打开文件夹. 按以下方法进行: 一.用管理员帐号登陆重注册下面这两个DLL文件. 在开始 ...