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>