【背 景】 一般我們想下載.txt .html等等屬于文本類型的文件裂七,可以通過a標(biāo)簽的“download”屬性來直接下載到本地皆看。但是當(dāng)遇到png等圖片類型和MP4等視頻類型的文件時,瀏覽器會默認打開一個新頁面然后展示圖片或視頻類容背零,并不會直接下載到本地腰吟。如下:
<a download='myPicture.jpg'>
【實 現(xiàn)】這里有兩種實現(xiàn)支持所有類型文件下載的方法:
方法一: 后臺給我們直接返回url時,我們可以采用window.open( rul ) 的形式下載徙瓶,如下寫法:
window.open("http://wx1.sinaimg.cn/large/aabb125aly1fjotz5bfbsj20dw0dwjsv.jpg'")
這種寫法瀏覽器會打開新的標(biāo)簽頁毛雇,然后再下載到本地。
方法二: 后臺給我們的是文件下載接口時侦镇,就采用form表弟的提交功能灵疮,代碼如下:
var id = '666';
try {
? ? ? ? const eleForm = document.createElement("form");//創(chuàng)建form
? ? ? ? eleForm.setAttribute("method", "get");
? ? ? ? eleForm.setAttribute(
? ? ? ? ? "action",
? ? ? ? ? "/api/file/download" + id
? ? ? ? );
? ? ? ? document.getElementsByTagName("body")[0].appendChild(eleForm);
? ? ? ? eleForm.submit();
? ? ? ? eleForm.remove();// 移除form
? ? ? } catch (e) {
? ? ? ? window.open("/api/file/download" + id);
? ? ? }
通過接口下載文件,可以實現(xiàn)在當(dāng)前頁面下載各種格式的文件壳繁!