国产视频app在很多網站上,都有一個點擊圖片或點擊某個鏈接會將指定的圖片下載到本地的功能,而這個功能就需要html 元素中的 A 標簽的 download 屬性來實現,接下來飛鳥慕魚博客就來說一說關于使用html或js實現圖片點擊下載的功能。

A 標簽的 download 屬性

国产视频appdownload:屬性為 A 標簽在 HTML5 中新增加的一個屬性,它可以強制觸發瀏覽器的下載操作。

語法:

<a href="text.jpg" download="下載后的文件名稱" >點擊我可下載圖片</a>

例:使用 html A 標簽下載圖片

HTML代碼:

<a href="text.jpg" download="text">
    <img src="text.jpg" >
</a>

說明:

国产视频app1、download 屬性規定被下載的超鏈接目標。

2、在 <a> 標簽中必須設置 href 屬性。

国产视频app3、該屬性也可以設置一個值來規定下載文件的名稱。所允許的值沒有限制,

js + html 實現下載

国产视频app如果不方便使用A標簽來實現下載,可以使用JS生成A元素的形式,來實現同樣的效果。

案例代碼:

<img id="mochu_img" src="test.jpg" >
<button  type="button" οnclick="Download_Img()">點擊下載圖片</button>
<script>
    function Download_Img() {
        var img = document.getElementById('mochu_img'); // 獲取要下載的圖片
        var url = img.src;                            // 獲取圖片地址
        var a = document.createElement('a');          // 創建一個a節點插入的document
        var event = new MouseEvent('click')           // 模擬鼠標click點擊事件
        a.download = 'mochu_img'                      // 設置a節點的download屬性值
        a.href = url;                                 // 將圖片的src賦值給a節點的href
        a.dispatchEvent(event)                        // 觸發鼠標點擊事件
    }
</script>

download 屬性補充說明

国产视频app1、并不是所有的瀏覽器支持此屬性,Firefox 和 Chrome是支持的

国产视频app2、Chrome 瀏覽器,在本地測試時失效

3、download 屬性,為html5 中新增的屬性