【JavaScript】使用url下載文件，解決chrome瀏覽器自動識別圖片打開問題。

前兩天做的一個文件下載，使用文件存儲地址url去下載，不需要打開文件。使用新建a標簽，觸發點擊事件來進行下載。

 downloadNormalFile(src, filename) {
                var link = document.createElement('a');
                link.setAttribute("download", filename);
                link.href = src;
                document.body.appendChild(link);//添加到頁面中，為兼容Firefox瀏覽器
                link.click();
                document.body.removeChild(link);//從頁面移除
            },

新建a標簽，設置href為文件存儲地址，添加html5的新屬性download，然后觸發a標簽的click事件即可。但是在火狐瀏覽器中a標簽需要添加到頁面中才能觸發事件下載。所以添加到body中后又移除。

---

 

上面是通常情況下的做法，我遇到一個問題，在chrome瀏覽器中當文件是圖片時，瀏覽器不會下載，而是打開圖片鏈接顯示。網上查找了很多方法，采用將utl轉換為base64格式，然后觸發下載，這樣瀏覽器不會自動識別url打開顯示。

ImgtodataURL(url, filename, fileType) {
                this.getBase64(url, fileType, (_baseUrl) => {
                    // 創建隱藏的可下載鏈接
                    var eleLink = document.createElement('a');
                    eleLink.download = filename;
                    eleLink.style.display = 'none';
                    // 圖片轉base64地址
                    eleLink.href = _baseUrl;
                    // 觸發點擊
                    document.body.appendChild(eleLink);
                    eleLink.click();
                    // 然后移除
                    document.body.removeChild(eleLink);
                });

            },
            getBase64(url, fileType, callback) {
                //通過構造函數來創建的 img 實例，在賦予 src 值后就會立刻下載圖片
                var Img = new Image(),
                    dataURL = '';
                Img.src = url;
                Img.setAttribute("crossOrigin", 'Anonymous');
                Img.onload = function () { //要先確保圖片完整獲取到，這是個異步事件
                    var canvas = document.createElement("canvas"), //創建canvas元素
                        width = Img.width, //確保canvas的尺寸和圖片一樣
                        height = Img.height;
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //將圖片繪制到canvas中
                    dataURL = canvas.toDataURL('image/' + fileType); //轉換圖片為dataURL
                    callback ? callback(dataURL) : null;
                };
            }

getbase64采用canvas繪制圖片后采用callback方法調用異步加載onload方法獲取到的dataurl，然后再新建a標簽觸發下載。

 

---

 

到上一步，基本解決了問題，但是在Edge瀏覽器中，下載圖片報錯了。

SCRIPT5022: SecurityError

 

因為在Edge中瀏覽器用戶代理值為：

包含chrome，所以在判斷瀏覽器的時候將Edge瀏覽器也判斷為了chrome瀏覽器，執行了getbase64轉換了url。故作判斷時需要排除這種情況。

isImageInChromeNotEdge(fType) {
                let bool = false;
                if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1)
                    (fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true);
                    return bool;
            },

最后從獲取到url后下載的操作完整代碼為：

　　　　download(src,row){    //row.ITEMNAME為文件名稱，src為文件存儲地址            
　　　　　　　　if (this.isImageInChromeNotEdge(fType)) {//判斷是否為chrome里的圖片
                    this.ImgtodataURL(src, row.ITEMNAME, fType);
                } else {
                    this.downloadNormalFile(src, row.ITEMNAME);
                }
            },
            isImageInChromeNotEdge(fType) {
                let bool = false;
                if (window.navigator.userAgent.indexOf("Chrome") !== -1 && window.navigator.userAgent.indexOf("Edge") === -1)
                    (fType === "jpg" || fType === "gif" || fType === "png" || fType === "bmp" || fType === "jpeg" || fType === "svg") && (bool = true);
                    return bool;
            },
            downloadNormalFile(src, filename) {
                var link = document.createElement('a');
                link.setAttribute("download", filename);
                link.href = src;
                document.body.appendChild(link);//添加到頁面中，為兼容Firefox瀏覽器
                link.click();
                document.body.removeChild(link);//從頁面移除
            },
            ImgtodataURL(url, filename, fileType) {
                this.getBase64(url, fileType, (_baseUrl) => {
                    // 創建隱藏的可下載鏈接
                    var eleLink = document.createElement('a');
                    eleLink.download = filename;
                    eleLink.style.display = 'none';
                    // 圖片轉base64地址
                    eleLink.href = _baseUrl;
                    // 觸發點擊
                    document.body.appendChild(eleLink);
                    eleLink.click();
                    // 然后移除
                    document.body.removeChild(eleLink);
                });

            },
            getBase64(url, fileType, callback) {
                //通過構造函數來創建的 img 實例，在賦予 src 值后就會立刻下載圖片
                var Img = new Image(),
                    dataURL = '';
                Img.src = url;
                Img.setAttribute("crossOrigin", 'Anonymous');
                Img.onload = function () { //要先確保圖片完整獲取到，這是個異步事件
                    var canvas = document.createElement("canvas"), //創建canvas元素
                        width = Img.width, //確保canvas的尺寸和圖片一樣
                        height = Img.height;
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //將圖片繪制到canvas中
                    dataURL = canvas.toDataURL('image/' + fileType); //轉換圖片為dataURL
                    callback ? callback(dataURL) : null;
                };
            }