需求:页面上有一个下载按钮,点击后实行文件下载功能。
方式一:使用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 > |