前端對(duì)于文件下載這塊的一些常用的基本方法计福。
一? 通過a標(biāo)簽來下載文件
? ? ? ? ??在html5中 a 標(biāo)簽多了一個(gè)屬性download涝动；沒有添加download屬性蘸嘶，用戶點(diǎn)擊a鏈接瀏覽器會(huì)打開并顯示該鏈接的內(nèi)容烫堤，若在a鏈接中加了 download 屬性，點(diǎn)擊該鏈接就不會(huì)打開這個(gè)文件昧谊，而是直接下載刽虹。注意：download屬性是html5中的a標(biāo)簽的新特性，與不支持h5的低版本瀏覽器不兼容呢诬！
?????????ex: <a download="文件名"?href="文件下載接口地址"></a>? ?
????????download屬性的值是下載后的文件名涌哲，href屬性的值是 后端文件下載接口地址
? ? ? ? 點(diǎn)擊非a標(biāo)簽按鈕下載文件，或者其他一些情況尚镰，可以通過創(chuàng)建a標(biāo)簽來下載
? ?????????function downloadFile(fileurl, filename) {
????????????????????var? a = document.createElement('a');? ? ? ? ? ?/ / 創(chuàng)建隱藏的可下載鏈接
? ? ? ? ? ? ? ? ? ? a.download = filename;
? ? ????????????????a.style.display = 'none';
????????????????????var? blob = new Blob(fileurl);? ? ? ? ? ? ? ? ? ? ? ? ? ? // 字符內(nèi)容轉(zhuǎn)變成blob地址
? ? ? ? ? ? ? ? ? ? ?a.href = URL.createObjectURL(blob);
????????????????????document.body.appendChild(a);? ? ? ? ? ? ? ? ? ?
? ? ????????????????a.click();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 觸發(fā)點(diǎn)擊
? ? ? ? ? ? ? ? ? ? ?document.body.removeChild(a);? ? ? ? ? ? ? ? ? // 然后移除
????????????};
? ? ? ? //downFile(fileurl, filename)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//fileurl?：? 下載地址? ?阀圾；filename ：?保存名稱?
二? 通過window.open()
? ? ? ? ex:window.open(fileurl)
三? 通過form表單
????? 原生? js? ：
? ? ? ? var form = document.createElement("form");? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?document.getElementsByTagName('body')[0].appendChild(form);
? ? ? ? form.setAttribute('style', 'display:none');
? ? ? ? form.setAttribute('target', '');
? ? ? ? form.setAttribute('method', 'get');
? ? ? ? form.setAttribute('action', fileurl);//下載文件的請(qǐng)求路徑
? ? ? ? var input1 = document.createElement('input');
? ? ? ? input1.setAttribute('type', 'hidden');
? ? ? ? input1.setAttribute('name', 'clinicId');
? ? ? ? input1.setAttribute('value', sess.clinicId);
? ? ? ? form.appendChild(input1);
? ? ? ? form.submit();
? ? ? ? jQuery:
? ? ? ? var form = $("<form>");? ? ? ? ? ? ? ? ? ? //定義一個(gè)form表單
? ? ? ? form.attr('style', 'display:none');? ? ? ? //下面為在form表單中添加查詢參數(shù)
? ? ? ? form.attr('target', '');
? ? ? ? form.attr('method', 'post');
? ? ? ? form.attr('action', fileurl);
? ? ? ? var input = $('<input>');
? ? ? ? input.attr('type', 'hidden');
? ? ? ? input.attr('name', 'exportPostTime');
? ? ? ? input.attr('value', timeString);
? ? ? ? $('body').append(form);? ? ? ? ? ? ? ? ? ? //將表單放置在web中
? ? ? ? form.append(input);? ? ? ? ? ? ? ? ? ? ? //將查詢參數(shù)控件提交到表單上
? ? ? ? form.submit();? ? ? ? ? ? ? ? ? ? ? ? ? ? //表單提交? ?
四? 通過? iframe和form
? ? ? 具體格式形式：
????<iframe name="iframe的name屬性值"? ? ?style="display:none;"></iframe>
? ? <form target="iframe的name屬性值"? ?method="post"? ? ? action="指向后端請(qǐng)求鏈接"? ? ?style="display:none;"? ??>
? ? ? ? ????<input type="text" name="后臺(tái)對(duì)應(yīng)的name字段"? ? ??value =?"上傳的值" />
????</form>
? ? js實(shí)現(xiàn)
? ??$("#downLoadIFrame").remove();
? ? ? ? var $Iframe = $("<iframe>");
? ? ? ? $Iframe.attr("name", "iframe的name屬性值");
? ? ? ? $Iframe.attr("id", "downLoadIFrame");
? ? ? ? $Iframe.attr("style", "diaplay:none");
? ? ? ? $("body").append($Iframe);
? ? ? ? var $form = $("<form>");
? ? ? ? $form.empty();
? ? ? ? $form.attr("style", "diaplay:none");
? ? ? ? $form.attr("target", "iframe的name屬性值"); // 對(duì)應(yīng)iframe的name屬性值
? ? ? ? $form.attr("method", "post");
? ? ? ? $form.attr("action", "指向后端請(qǐng)求鏈接"); // 指向后端請(qǐng)求鏈接
? ? ? ? $("body").append($form);
? ? ? ? // 新建input, 并設(shè)置name屬性和value的值
? ? ? ? var $input = $("<input>");
? ? ? ? $input.attr("type", "hidden");
? ? ? ? $input.attr("name", "后臺(tái)對(duì)應(yīng)的name字段"); // 填上后臺(tái)對(duì)應(yīng)的name字段
? ? ? ? $input.attr("value", "上傳的值"); // 填上傳的值
? ? ? ? $form.append($input);
? ? ? ? $form.submit();
五? 總結(jié)
? ? ? ? 首先，要知道你的fileurl是怎么來的狗唉，然后注意文件下載是"post"還是"get"請(qǐng)求初烘，還要注意兼容性。
? ? ? ? 本篇文章只是展示了幾種常用的，簡(jiǎn)單的文件下載方式肾筐，大家參考之余哆料，可以發(fā)散思維，不如看一下文件下載的插件是怎么實(shí)現(xiàn)的吗铐，文件批量是下載是可以怎么實(shí)現(xiàn)剧劝，文件流中，圖片抓歼，視頻讥此，音頻等是怎么做到批量下載！
? ? ? ? ? 最后谣妻，感謝大家閱讀萄喳，希望大家不吝賜教，不吝點(diǎn)贊蹋半！
