快捷導(dǎo)航

JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能案例分析【親測有效】

更新時(shí)間：2023年04月20日 09:05:46 作者：小雍雍

這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器點(diǎn)擊下載圖片功能,對比分析了同源與不同源兩種解決方案,并以實(shí)際案例形式分析了不同源情況下針對文件點(diǎn)擊下載的具體實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

點(diǎn)擊下載圖片分兩種：
1、一種是同源地址圖片（也就是本地本項(xiàng)目中的圖片）；
2、另一種是不同源的圖片；（不同域名下，比如阿里云七牛云上的圖片）

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

第一種（同源）下載：

利用a標(biāo)簽下載， a標(biāo)簽有一個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" />

注意，它僅支持同源鏈接下載，非同源鏈接還是會直接打開圖片:
如非同源 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download />

第一種（不同源）下載：

直接上代碼

var x=new XMLHttpRequest();
    x.open("GET", "http://danml.com/wave2.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)擊事件里添加以上代碼即可！親測有效

應(yīng)用案例

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

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

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

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

  }

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

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

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

您可能感興趣的文章: