文件下载

　　今天在项目中遇到了一个问题，本来在a标签的href中有下载文件的地址，但是点击无效，经定位发现原来是js脚本中将所有的a标签的默认行为阻止了，a标签的点击事件了调用了e.preventDefault();故在此总结下。

文件下载常用的两种方式

1. 通过a标签，href直接指向服务器的文件地址

　　<a id= "download" href="upload.txt"></a>下载

 

2. 通过后端服务下载文件

　　<a id= "download" href="/service/upload?id=123"></a>下载

 

3. 将图片作为附件下载

　　在浏览器中，点击链接一般会在新的标签页显示图片，HTML5增加了download下载属性，通过这个属性浏览器会让此文件通过下载方式处理。也可以给属性一个值做为下载文件名 download="filename"）

　　可以使用  if('download'in document.createElement('a')) 判断浏览器的支持情况

　　<a id= "download" href="/service/a.png" download="filename.txt">下载图片</a>

　　针对第一种情况，如果该页面中阻止了a标签的默认行为那该怎么办呢？

　　可能大家会想到使用window.open方法，给下载按钮添加点击事件 调用window.open（"文件地址"）;没错，这样确实可以，但是点击后会新开一个空窗口，那怎么实现不新开窗口呢？

　　在w3cSchool上发现 window.open(URL,name,features,replace) 中的第二个参数 是一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。那么就可以在当前页面中添加一个iframe 就可以实现

<iframe name="downloadWnd" style="height:0;width:0"></iframe>

$("#download").click(function(e){

　　window.open("要下载的文件地址","downloadWnd");

});

由此我想到了另外一种使用场景--页面文件无刷新上传，文件上传一般通过form表单上传

<iframe name="uploadWnd" style="height:0;width:0"></iframe>

<form action="/service/upload/" target="uploadWnd" enctype="multipart/form-data">

　　<input name="file" type="file"/>

　　<input type="submit"/>

</form>

 

获取iframe里边的相应数据

 

getResponse: function(frame) {
     var doc = null,
          responseText = '';

     try {
          if (frame.contentWindow) {
               doc = frame.contentWindow.document;
          }
     } catch (err) {
          alert('cannot get iframe.contentWindow document: ' + err);
     }

     if(!doc){
          try {
               doc = frame.contentDocument ? frame.contentDocument : frame.document;
          } catch (err) {
               alert('cannot get iframe.contentDocument: ' + err);
               doc = frame.document;
          }
     }
     
     // 获取根节点
     var docRoot = doc.body ? doc.body : doc.documentElement,
          pre = doc.getElementsByTagName('pre')[0],
          b = doc.getElementsByTagName('body')[0];

     if (pre) {
          responseText = pre.textContent ? pre.textContent : pre.innerText;
     } else if (b) {
          responseText = b.textContent ? b.textContent : b.innerText;
     }

     return responseText;
}