【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; }; }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM