欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于使用js下载图片

程序员文章站 2022-06-18 16:13:45
使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利。 服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差。这里推荐使用blob。 上代码: xhr.responseType 返回类型指明blob, 这样返回的xhr.response 就是一个b ......

使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利。

服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差。这里推荐使用blob。

上代码:

 1 var xhr = new XMLHttpRequest()
 2 xhr.open('GET', url, true)
 3 xhr.responseType = 'blob'     
 4 xhr.onload = function () {
 5   if (xhr.status === 200) {         
 6     var blob = new Blob([xhr.response], {'type': 'application/octet-stream'})         
 7     saveAs(blob, filename)
 8   }
 9 }
10 xhr.send()

xhr.responseType 返回类型指明blob, 这样返回的xhr.response 就是一个blob对象

{'type': 'application/octet-stream'}是为了兼容safari

最后这个saveAs方法则是使用了file-saver这个库

至此,图片下载功能就完成了~