h5 移動端下載

前端下載

頁面a 標簽下載

使用 a 標簽下載原理，利用 h5 a 標簽 download 屬性，點擊頁面 a 標簽后即可下載

<a href='url' download="filename.ext">下載</a>

js利用a標簽下載

注意，添加 link.target = '_blank'  和 document.body.append(link) 代碼可解決第三方資源情況下，點擊跳轉打開頁面（而非下載）問題

    // a 標簽下載文件
    function aDownlad(url, fileName) {
        const link = document.createElement('a')
        link.href = url
        link.target = '_blank'
        link.download = fileName
        link.style.display = 'none'
        document.body.append(link)
        link.click()
    }

a標簽download兼容性

blob下載文件

    // 通過blob下載文件
    function downloadByBlob(blob, fileName) {
        if (window.navigator.msSaveBlob) {//ie下載
            window.navigator.msSaveBlob(blob, fileName)
        } else {
            const URL = window.URL || window.webkitURL
            const url = URL.createObjectURL(blob)
            aDownlad(url, fileName)
        }
    }

XMLHttpRequest下載文件

跨域情況下，該方法失效

    // 通過XMLHttpRequest下載文件
    function downloadFileByUrl(url, fileName) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                // 獲取blob數據並保存
                downloadByBlob(xhr.response, fileName);
            }
        };
        xhr.send();
    }

window.open下載文件

window.open(url)

1. 因為蘋果的安全機制攔截，移動端window.open在蘋果手機失效

FileSaver.js下載文件（推薦）

（github文檔地址）

方法簽名

FileSaver.saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

FileSaver.js 內部根據兼容性已實現上述所有的前端方法。一款很好的web app 客戶端下載文件工具。

Pass { autoBom: true } if you want FileSaver.js to automatically provide Unicode text encoding hints (see: byte order mark). Note that this is only done if your blob type has charset=utf-8 set.

 

后端輔助下載文件

所謂后端下載文件，其實利用 http 響應頭（Content-Disposition ：attachment）下載文件 

MDN地址https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition     

Response.AppendHeader("Content-Disposition","attachment;filename=FileName.txt");
在常規的HTTP應答中，Content-Disposition 響應頭指示回復的內容該以何種形式展示，是以內聯的形式（即網頁或者頁面的一部分），還是以附件的形式下載並保存到本地。

當http響應頭添加上述響應頭之后，這樣瀏覽器會提示保存還是打開文件。（這樣有一個好處就是文件名可以由后端控制）

 

問題總結

• ①，如果url指向同源資源，是正常的。如果url指向第三方資源，download會失效，表現和不使用download時一致——瀏覽器能打開的文件，瀏覽器會直接打開，不能打開的文件，會直接下載。瀏覽器打開的文件，可以手動下載。

解決方案

　　若指向資源跨域，最好的的辦法還是 讓后端做一次轉發，然后返回資源給前端下載；

　　因為在移動端，還可以讓h5與原生端交互形式，讓原生端實現下載文件功能

待解決問題

1. 目前發現微信內置瀏覽器和qq瀏覽器不支持文件下載，使用 a 標簽和 file-saver.js 均不能實現下載

參考鏈接

1. 從微信H5點擊保存圖片說起

 

 

 

@萍2櫻釋ღ( ´･ᴗ･` )