如何使用JS实现异步下载吗?即:既能实现下载又不刷新页面。这时我们常常会想到使用ajax,但是由于ajax接受的response始终是字符串,因此并不能使用ajax来实现下载功能。
常见是新建下载的方法为
1,a标签
2,url跳转,
3,提交表单,
其中a标签体验好些,其他两个会打开一个新标签再下载再关闭新标签,整个过程让人感觉眼花缭乱,因此推荐使用a标签实现下载功能。
1 //使用表单下载
2 function commDownload(url, method, params) { 3 let formStr = `<form action="${url}" method="${method}" >`; 4 for(let [key, value] of Object.entries(params)) { 5 formStr += `<input type="text" name="${key}" value="${value}" />`;
6 } 7 formStr += "</form>"; 8 $(formStr).appendTo("body").submit().remove(); 9 } 10
11 //使用url跳转下载
12 function commDownload2(url, params) { 13 url += "?"; 14 for(let key in params) { 15 url += key + "=" + params[key] + "&"; 16 } 17 url = url.substr(0, url.length - 1); 18 window.open(url); 19 } 20
21 //使用a标签下载--推荐使用
22 function commDownload3(url, params) { 23 url += "?"; 24 for(let key in params) { 25 url += key + "=" + params[key] + "&"; 26 } 27 url = url.substr(0, url.length - 1); 28 $("<a href=" + url + " />")[0].click(); 29 }