求助 需求： 拿到文件的七牛地址（相似於：https://lcdns-pic.learnta.com/Fm01lUytIrlG9qhw5cYnIxRO3

求助

需求：

拿到文件的七牛地址（相似於：lcdns-pic.learnta.com/Fm01lUytIrl…

實現前端下載文件。而且能夠重命名文件（文件名重事先從後端拿到），兼容主流遊覽器包括 移動端和微信

問題：

• 兼容性問題

• 手機預覽文件時，出現‘.txt’ 文件亂碼

• 預覽文件首次成功，刷新遊覽器即拋出 WebkitBlobRessource error 1

• 部分安卓手機和微信中打開直接報錯

個人兼容性有問題的代碼

此段代碼在web端能夠實現兼容性下載

可是在手機遊覽器中會存在刷新遊覽器即拋出 WebkitBlobRessource error 1

在微信遊覽器和部分安卓手機自帶遊覽器中直接報錯

const initXMLhttp = () => {
        var xmlhttp
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest()
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
        }
        return xmlhttp
    }

    /**
    * 獲取 blob
    * @param  {String} url 目標文件地址
    * @return {Promise}
    */
    function getBlob(url) {
        return new Promise(resolve => {
            // const xhr = new XMLHttpRequest()
            const xhr = initXMLhttp()
            xhr.open('GET', url, true)
            xhr.responseType = 'blob'
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve(xhr.response)
                }
            }

            xhr.send()
        })
    }

    /**
    * 保存
    * @param  {Blob} blob
    * @param  {String} filename 想要保存的文件名稱
    */
    function saveAs(blob, filename) {
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename)
        } else {
            const link = document.createElement('a')
            const body = document.querySelector('body')
            if (filename.indexOf('.txt') >= 0) {
                link.href = window.URL.createObjectURL(
                    new Blob(['\uFEFF', blob], { type: 'text/plain;charset=utf-8' })
                )
            } else {
                link.href = window.URL.createObjectURL(blob)
            }
            link.download = filename

            // fix Firefox
            link.style.display = 'none'
            body.appendChild(link)

            link.click()
            body.removeChild(link)

            window.URL.revokeObjectURL(link.href)
        }
    }

    /**
    * 下載
    * @param  {String} url 目標文件地址
    * @param  {String} filename 想要保存的文件名稱
    */
    function download(url, filename) {
        getBlob(url).then(blob => {
            saveAs(blob, filename)
        })
    }

複製代碼

你們若有踩過此坑，請給小弟分享一下