HTML5 圖片下載

1. 概述

1.1 說明

在項目過程中，有時候需要下載某一展示圖片，html5中定義了<a> download屬性，download屬性規定被下載的超鏈接目標，該屬性可以設置一個值來規定下載文件的名稱(名稱值沒有限制，瀏覽器將自動檢測正確的文件擴展名並添加到文件，如.img,.txt等)。在<a>標簽中必須設置href屬性值。

1.2 注意

　　<a href='圖片地址或base64值' download></a>，其中圖片地址與當前網頁有可能會存在跨域問題而導致不能夠下載成功。base64字符流則不會存在此問題(base64文件流格式如 data:image/png;base64,********)。

 2. 實例

2.1 顯示與下載

　　使用img標簽去顯示img內容，點擊圖片進行下載顯示圖片。

<a :href='imgUrl' :download="imgName">
    <img border="0"  :src='imgUrl' :alt="imgName" />
</a>