js下如何弹出保存对话框进行文件下载

时间:2021-03-08 07:04:35

前后台交互,后台返给前端的下载文件的路径假设为url,前端获取到这个url之后,需要下载整个文件,实现方法采用第二种:

(1)、html5中的a标签中的href属性和download属性可以通过超链接的形式直接下载文件,download为下载的文件重新指定一个文件名,href为链接的文件地址,即为url。具体的写法如下:

   <a href="/uploadfolder/xxxx.txt">点击下载</a>用户在点击这个链接的时候,就会直接下载这个文件,但是这里有个问题,像txt,jpg这些浏览器支持直接打开的文件是不会执行下载的,而是会直接打开。这时候可以给a标签添加一个download属性:

  <a href="/uploadfolder/xxxx.txt" download="文件名.txt">点击下载</a> 

download也可以不给值,这样就会使用默认的文件名。


(2)、通过iframe标签中的src属性可以下载文件,src即为后台返给前端的url,具体的写法如下:

                   

function downloadFile(url) {   
try{
var elemIF = document.createElement("iframe");
elemIF.src
= url;
elemIF.style.display
= "none";
document.body.appendChild(elemIF);
}
catch(e){
}
}
<input type="button" value="进入1" onClick = "downloadFile('http://wan.exe')">

注:在HTML中,IFRAME的属性用SRC,但在JS中,只有部份浏览器支持修改SRC(读是没问题),真正通用的是要修改对应框架的href值。

function switchIframe(){
window.frames[
"frameName"].location.href="action(或你需要的名字).aspx"
}