一、通过a标签来下载图片或文件
<a href="down.jpg" download="name" target="_blank">
</a>
**注意:**如果不加download属性,某些浏览器会解析并打开图片。
二、通过js动态创建标记下载图片或文件
function downloadImg(){
const url = 'http://www.a.com/pic.jpg'; // 图片地址
let a = document.createElement('a'); // 创建一个a节点插入的document
const event = new MouseEvent('click') // 模拟鼠标click点击事件
a.download = '图片名字' // 设置a节点的download属性值
a.target = '_blank' // 打开新窗口下载图片
a.href = url; // 将图片的src赋值给a节点的href
a.dispatchEvent(event) // 触发鼠标点击事件
a = null // 防止内存泄露
}
**注意:**该方法如果下载url和访问域名不同,也会导致某些浏览器解析并打开图片,加上target="_blank"的好处,不会在原先页面上打开图片。
三、使用window.open()下载文件
window.open('http://www.a.com/pic.jpg', '_blank')
注意:适用于下载一些压缩包、word文件等浏览器无法解析的文件
四、解决图片下载问题的终极方案
function downloadIamge(imgsrc, name) {
const x = new XMLHttpRequest()
x.open('GET', imgsrc, 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 = name
a.click()
}
x.send()
}
缺点:文件过大的情况下,响应会很慢。