前端文件下载方式
一 通过a标签来下载文件
在html5中 a 标签多了一个属性download；没有添加download属性，用户点击a链接浏览器会打开并显示该链接的内容，若在a链接中加了 download 属性，点击该链接就不会打开这个文件，而是直接下载。注意：download属性是html5中的a标签的新特性，与不支持h5的低版本浏览器不兼容！
ex: <a download="文件名" href="文件下载接口地址"></a>
download属性的值是下载后的文件名，href属性的值是 后端文件下载接口地址
点击非a标签按钮下载文件，或者其他一些情况，可以通过创建a标签来下载
1 function downloadFile(fileurl, filename) { 2 3 var a = document.createElement('a'); / / 创建隐藏的可下载链接 4 5 a.download = filename; 6 7 a.style.display = 'none'; 8 9 var blob = new Blob(fileurl); // 字符内容转变成blob地址 10 11 a.href = URL.createObjectURL(blob); 12 13 document.body.appendChild(a); 14 15 a.click(); // 触发点击 16 17 document.body.removeChild(a); // 然后移除 18 19 }; 20 21 //downFile(fileurl, filename) //fileurl ： 下载地址 ；filename ： 保存名称 22
二 通过window.open()
ex:window.open(fileurl)
三 通过form表单
1 原生 js ： 2 3 var form = document.createElement("form"); document.getElementsByTagName('body')[0].appendChild(form); 4 5 form.setAttribute('style', 'display:none'); 6 7 form.setAttribute('target', ''); 8 9 form.setAttribute('method', 'get'); 10 11 form.setAttribute('action', fileurl);//下载文件的请求路径 12 13 var input1 = document.createElement('input'); 14 15 input1.setAttribute('type', 'hidden'); 16 17 input1.setAttribute('name', 'clinicId'); 18 19 input1.setAttribute('value', sess.clinicId); 20 21 form.appendChild(input1); 22 23 form.submit();
1 jQuery: 2 3 var form = $("<form>"); //定义一个form表单 4 5 form.attr('style', 'display:none'); //下面为在form表单中添加查询参数 6 7 form.attr('target', ''); 8 9 form.attr('method', 'post'); 10 11 form.attr('action', fileurl); 12 13 var input = $('<input>'); 14 15 input.attr('type', 'hidden'); 16 17 input.attr('name', 'exportPostTime'); 18 19 input.attr('value', timeString); 20 21 $('body').append(form); //将表单放置在web中 22 23 form.append(input); //将查询参数控件提交到表单上 24 25 form.submit(); //表单提交
1 angular: 2 var $eleForm = $("<form method='post'></form>"); 3 4 $eleForm.attr("action",encodeURI("/downloadFile/"+$scope.fileId)); 5 6 $(document.body).append($eleForm); 7 8 //提交表单，实现下载 9 $eleForm.submit();*/
四 通过 iframe和form
1 具体格式形式： 2 3 <iframe name="iframe的name属性值" style="display:none;"></iframe> 4 5 <form target="iframe的name属性值" method="post" action="指向后端请求链接" style="display:none;" > 6 7 <input type="text" name="后台对应的name字段" value = "上传的值" /> 8 9 </form> 10 11 12 13 js实现 14 15 $("#downLoadIFrame").remove(); 16 17 var $Iframe = $("<iframe>"); 18 19 $Iframe.attr("name", "iframe的name属性值"); 20 21 $Iframe.attr("id", "downLoadIFrame"); 22 23 $Iframe.attr("style", "diaplay:none"); 24 25 $("body").append($Iframe); 26 27 var $form = $("<form>"); 28 29 $form.empty(); 30 31 $form.attr("style", "diaplay:none"); 32 33 $form.attr("target", "iframe的name属性值"); // 对应iframe的name属性值 34 35 $form.attr("method", "post"); 36 37 $form.attr("action", "指向后端请求链接"); // 指向后端请求链接 38 39 $("body").append($form); 40 41 // 新建input, 并设置name属性和value的值 42 43 var $input = $("<input>"); 44 45 $input.attr("type", "hidden"); 46 47 $input.attr("name", "后台对应的name字段"); // 填上后台对应的name字段 48 49 $input.attr("value", "上传的值"); // 填上传的值 50 51 $form.append($input); 52 53 $form.submit(); 54
五 总结
首先，要知道你的fileurl是怎么来的，然后注意文件下载是"post"还是"get"请求，还要注意兼容性
作者：毒行影客
链接：https://www.jianshu.com/p/48ad4346fe4b
