兼容ie 附件下載,可自定義文件名

有些時候上傳的文件名會重複,後臺工程師就會在存入數據庫時文件路徑加上隨機數,文件名單獨存個字段;
在谷歌上下載文件時,只要後臺返回了文件名,就可以使用a標籤的download屬性寫成文件名,就可以保持原樣下載下來,但是IE瀏覽器就不認識download屬性,導致下載下來的文件名就是路徑裏面的名字(帶上了隨機數)。這樣用戶體驗不好。
所以多方查找資料,寫了一個方法,讓我們可以讓文件保持原來的名字下載下來。這裏記錄一下:

/**
     * 兼容ie 附件下載
     * urls: 文件相對地址
     * name: 文件下載名字
     */
    commonDowloadFile: function(urls, name) {
        //文件地址
        let url = urls;
        let xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = "blob"; // 返回類型blob
        // 定義請求完成的處理函數,請求前也可以增加加載框/禁用下載按鈕邏輯
        xhr.onload = function() {
                // 請求完成
                if (this.status === 200) {
                    // 返回200
                    var blob = this.response;
                    var href = window.URL.createObjectURL(blob); //創建下載的鏈接
                    //判斷是否是IE瀏覽器,是的話返回true
                    if (window.navigator.msSaveBlob) {
                        try {
                            window.navigator.msSaveBlob(blob, name)
                        } catch (e) {
                            console.log(e);
                        }
                    } else {
                        // 谷歌瀏覽器 創建a標籤 添加download屬性下載
                        var downloadElement = document.createElement('a');
                        downloadElement.href = href;
                        downloadElement.download = name; //下載後文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //點擊下載
                        document.body.removeChild(downloadElement); //下載完成移除元素
                        window.URL.revokeObjectURL(href); //釋放掉blob對象
                    }
                }
            }
            // 發送ajax請求
        xhr.send()
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章