JS怎么實現瀏覽器點擊下載圖片功能

本篇內容介紹了“JS怎么實現瀏覽器點擊下載圖片功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

點擊下載圖片分兩種：
1、一種是同源地址圖片（也就是本地本項目中的圖片）；
2、另一種是不同源的圖片；

下面我們就具體說一下這兩種圖片下載的方式：
 

第一種（同源）下載：

利用a標簽下載， a標簽有一個download的屬性，添加了該屬性，a標簽將直接下載文件，并根據download屬性的值設置下載文件的文件名，不為download屬性設置值則文件將以默認文件名下載:

如：

<!-- 文件名為默認名稱 -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  download />
<!-- 文件名為baidu.gif -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  download="baidu" />
<!-- 文件名為baidu.png -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  download="baidu.png" />

注意，它僅支持同源鏈接下載，非同源鏈接還是會直接打開圖片:
如非同源 <a href="https://cache.yisu.com/upload/information/20230420/112/138463.gif" download />

第一種（不同源）下載：

直接上代碼

var x=new XMLHttpRequest();
    x.open("GET", "https://cache.yisu.com/upload/information/20230420/112/138464.gif", true);
    x.responseType = 'blob';
    x.onload=function(e){
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = ''
        a.click()
    }
    x.send();

在點擊事件里添加以上代碼即可！親測有效

應用案例

說明：筆者在實際開發中針對上述代碼進行了測試，案例記錄如下：

1.html部分，應用a鏈接添加時間響應，實現點擊下載功能：

<a href="http://192.168.1.8:8088/imgtmp/202304191632188702.png" rel="external nofollow" 
onclick="saveas(this.href,'202304191632188702.png');" target="_blank">
202304191632188702.png
</a>

2.點擊下載的js事件響應部分，將上文提到的下載代碼封裝成一個函數：

window.saveas = function(img,filename){
    event.returnValue = false;
    let x=new XMLHttpRequest();
    x.open("GET", img, true);
    x.responseType = 'blob';
    x.onload=function(e){
        let url = window.URL.createObjectURL(x.response);
        let a = document.createElement('a');
        a.href = url
        a.download = filename
        a.click()
    }
    x.send();

  }

注意：對比上文中的代碼，這里的函數封裝做了一定的改進，要注意兩點：

①.首先 event.returnValue = false; 用來阻止默認事件；

②.a.download = '' 必須傳入文件名！否則將會生成一個.json 格式的文件！

“JS怎么實現瀏覽器點擊下載圖片功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！