【背 景】 一般我們想下載.txt .html等等屬于文本類型的文件，可以通過a標(biāo)簽的“download”屬性來直接下載到本地。但是當(dāng)遇到png等圖片類型和MP4等視頻類型的文件時，瀏覽器會默認(rèn)打開一個新頁面然后展示圖片或視頻類容，并不會直接下載到本地。如下：
<a download='myPicture.jpg'>
【實(shí) 現(xiàn)】這里有兩種實(shí)現(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);
? ? ? }
通過接口下載文件，可以實(shí)現(xiàn)在當(dāng)前頁面下載各種格式的文件！
