欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年04月20日 09:05:46   作者：小雍雍  
這篇文章主要介紹了JS實現(xiàn)瀏覽器點擊下載圖片功能,對比分析了同源與不同源兩種解決方案,并以實際案例形式分析了不同源情況下針對文件點擊下載的具體實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下

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

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

第一種（同源）下載：

利用a標簽下載， a標簽有一個download的屬性，添加了該屬性，a標簽將直接下載文件，并根據(jù)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="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();

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

應用案例

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

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

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

2.點擊下載的js事件響應部分，將上文提到的下載代碼封裝成一個函數(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ù)封裝做了一定的改進，要注意兩點：

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

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

相關文章

最新評論