【JS】前端文件下载(无刷新)方法总结

#传统方法利用iframe或form.submit或windows.open直接向后端发请求,后端返回文件流,后端处理成功后会直接返回到页面,浏览器会整理并打开自己的保存下载文件机制。1、利用form.submit直接向后端提交,后端返回文件流1)前端代码:1vardownloadURL="RestHandle.ashx";2vartestForm=$("<form>");//定义一个...

#传统方法

利用iframe 或 form.submit 或 windows.open直接向后端发请求,后端返回文件流,后端处理成功后会直接返回到页面,浏览器会整理并打开自己的保存下载文件机制 。

1、利用form.submit直接向后端提交,后端返回文件流

  1)前端代码:

 1 var downloadURL = "RestHandle.ashx"; 2 var testForm = $("<form>");//定义一个form表单 3 testForm.attr('style','display:none');//设置form表单属性 4 testForm.attr('target',''); 5 testForm.attr('method','post'); 6 testForm.attr('action',downloadURL); 7 8 var nameInput = $('<input>'); //构造formdata 9 nameInput.attr('type','hidden'); 10 nameInput.attr('name','fileName'); 11 nameInput.attr('value','test.txt');  12  13 $('body').append(testForm);  //将表单放置在web中14 testForm.append(nameInput);//将formdata添加到表单上15 testForm.submit();//表单提交16 testForm.remove();  //表单移除

  2)服务端代码,以asp.net为例:

 1 public class TestHandler : IHttpHandler 2 { 3  4  public void ProcessRequest(HttpContext context) 5  { 6string fileName = context.Request["FileName"];//客户端传送过来的要下载的文件名 7string filePath = System.Web.HttpContext.Current.Server.MapPath("DownLoad/"fileName);//路径 8  9FileInfo newFile = new FileInfo(filePath);10 11//以字符流的形式下载文件12FileStream fs = new FileStream(filePath, FileMode.Open);13byte[] bytes = new byte[(int)fs.Length];14fs.Read(bytes, 0, bytes.Length);15   fs.Close();16context.Response.ContentType = "application/octet-stream";17//通知浏览器下载文件而不是打开18context.Response.AddHeader("Content-Disposition", "attachment;filename="   HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));19   context.Response.BinaryWrite(bytes);20   context.Response.Flush();21   context.Response.End();22  }23 24  public bool IsReusable25  {26get27   {28 return false;29   }30  }31 }

  3)优缺点:

    优点 :兼容性良好,传统方式,不会出现URL长度限制问题;

    缺点:拿不到后端处理这个过程的时机,无法根据回调函数做交互以及进度提示

2、利于iframe直接向后端提交,后端返回文件流

  1)前端代码:

1 function downFileByIframe(parameters) {2  var downloadURL = "TestHandler.ashx?FileName=test.txt";3  var iframe = document.createElement("iframe");4  iframe.src = downloadURL;5  iframe.style.display = "none";6  document.body.appendChild(iframe);7 }

  2)后端代码:同上

  3)优缺点:

    优点: 兼容性较好

    缺点: *html中会增加多余的iframe元素,增加了维护成本;

       *拿不到后端处理这个过程的时机,无法根据回调函数做交互以及进度提示;

      *URL长度有限制;


3、使用windows.open下载文件

  1)前端代码

1 var downloadURL = "TestHandler.ashx?FileName=test.txt";2 window.open(downloadURL);

  2)后端代码:同上

  3)优缺点:

    优点: 兼容性良好,代码简洁;

    缺点:*URL长度有限制;

       *拿不到后端处理这个过程的时机,无法根据回调函数做交互以及进度提示;

4、解决“无法根据回调函数做交互”的问题:ajax提交,后端返回在线文件地址

  利用ajax去提交请求,后端会返回一个线上的文件地址,前端可以通过原生的window.open打开这个地址就可以实现下载;

  也可以通过a标签设置href以及download属性,并自动点击实现其下载功能,关于其兼容性问题,可以判断download属性是否存在来弥补。

  1)优缺点:

  优点 :可以拿到其返回时机,可以做交互;

  缺点 :线上产生大量的中间临时文件,可以用设置时限来优化。解决方案:可使用大厂的云存储,从而减少临时文件的产生;

  2)前端代码:

 1 $.ajax({ 2  type: "post", 3  url: "TestHandler.ashx", 4  data: {'FileName':'test.txt'}, 5  success: function (res) { 6if (res.Status) { 7 // window.open或者a标签下载  8 var isSupportDownload = 'download' in document.createElement('a'); 9 if (isSupportDownload) {10  var $a = $("<a>");11  $a.attr({12   href: res.url,13download: 'filename'14  }).hide().appendTo($("body"))[0].click();15 } else {16  window.open(res.url)17 }18} else {19 alert(res.Message);20   }21  }22 })

5、解决“无法根据回调函数做交互”的问题:jquery-download 插件

  jquery.download.js插件github地址:https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js

  jquery.download.js插件cdn地址:https://www.bootcdn.cn/jquery.fileDownload/

  支持场景 : 与上面的几种方案相比,这个模块提供的方案更加完善,而不是局限于某种方案,相当于将上面的几种方案结合了起来, 使用率很高。在源码中,我们可以看到在这个模块中针对各个浏览器和相应的属性是否支持进行了比较全面的兼容。其对应的下载文件方案包括了以下几种。

  • window.open(url)打开某个文件地址
  • iframe的框架中,设置src属性,通过iframe进行文件的下载,支持文件地址
  • 通过form标签,设置action的文件地址,然后通过form的提交来完成文件的下载

源文地址:https://www.guoxiongfei.cn/cntech/14881.html