前端下载文件的方式

需求：页面上有一个下载按钮，点击后实行文件下载功能。

方式一：使用window.open()

方式二：使用form表单下载

方式三：使用a标签，H5中有download属性

还可以使用第三方类库：npm install downloadjs

 

方式一：使用window.open()

1 2 3 4 5 6 7 8

var exportURL = "/moduleName/rest/exportdata?startDate=" + startDate + "&endDate=" + endDate;    console.log(exportURL);    ajaxWrapper(exportURL, function () {        window.open(exportURL, "_blank");//打开一个新的窗口，调用下载的API    }, function () {                     alert("Error");            window.location.reload();               });

方式一中存在一个问题：　下载文件时，能不能不打开新的窗口？（打开新的窗口需要设置浏览器：偏好设置->安全性，去掉阻止弹窗的复选框）

方式二：使用form表单下载　

1 2 3 4 5 6 7 8 9 10 11

//通过form          $eleBtn2.click(function(){              var $eleForm = $("<form method='get'></form>");                  $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");                  $(document.body).append($eleForm);                  //提交表单，实现下载              $eleForm.submit();          });

方式三：使用a标签

1 2 3

<div>         <a href="zip/file-1.zip" download="test.zip">点击下载文件</a> </div>