<!-- 文件名為默認名稱 -->
<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();

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

應(yīng)用案例

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

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

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

2.點擊下載的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ù)封裝做了一定的改進，要注意兩點：

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

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

您可能感興趣的文章: