JS怎么實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能

本篇內(nèi)容介紹了“JS怎么實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

點(diǎn)擊下載圖片分兩種：
1、一種是同源地址圖片（也就是本地本項(xiàng)目中的圖片）；
2、另一種是不同源的圖片；

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

第一種（同源）下載：

利用a標(biāo)簽下載， a標(biāo)簽有一個(gè)download的屬性，添加了該屬性，a標(biāo)簽將直接下載文件，并根據(jù)download屬性的值設(shè)置下載文件的文件名，不為download屬性設(shè)置值則文件將以默認(rèn)文件名下載:

如：

<!-- 文件名為默認(rèn)名稱 -->
<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" />

注意，它僅支持同源鏈接下載，非同源鏈接還是會(huì)直接打開圖片:
如非同源 <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();

在點(diǎn)擊事件里添加以上代碼即可！親測(cè)有效

應(yīng)用案例

說(shuō)明：筆者在實(shí)際開發(fā)中針對(duì)上述代碼進(jìn)行了測(cè)試，案例記錄如下：

1.html部分，應(yīng)用a鏈接添加時(shí)間響應(yīng)，實(shí)現(xiàn)點(diǎn)擊下載功能：

<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.點(diǎn)擊下載的js事件響應(yīng)部分，將上文提到的下載代碼封裝成一個(gè)函數(shù)：

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();

  }

注意：對(duì)比上文中的代碼，這里的函數(shù)封裝做了一定的改進(jìn)，要注意兩點(diǎn)：

①.首先 event.returnValue = false; 用來(lái)阻止默認(rèn)事件；

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

“JS怎么實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！