前端實現文件下載

前端實現文件下載功能

對於下載文件來說，大部分場景都是后端來實現，點端指需求請求接口就好了，但是有時候這種方式反而會占用多余的資源和帶寬，如果需要下載的是用戶自己生成的內容或者內容已經返回到客戶端了，這時候能不經過服務端而直接生成下載任務，能節省不少的資源和時間開銷。

一般來說前端實現的思路就是通過動態創建a標簽，設置其download屬性，最后刪除a就好了，對於不是圖片的文件一般都可以下載，但是如果是圖片，有些瀏覽器會自動打開圖片，所以我們需要手動把它轉化為data:URLs或blob:URLs，基於這個原理，我們可以用fileReader，也可以用fetch-URL.createObjectURL，這里經過大量測試我采用后者：

 

function download(url, filename) {
    return fetch(url).then(res => res.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }))
}

　該方法傳入一個文件的地址和希望使用的文件名，這樣，我們就能優雅的使用它來實現下載了