下载图片信息和指定的图片
以vue.js为例,列表中显示了图片信息。现在我需要把这张图片下载的本地。
1、首先,获取连接地址,格式是字符串。讲地址字符内容转变为blob地址。
2、创建一个隐藏的a标签,赋予href链接,点击a标签实现下载。
具体看代码如下:
download:function(item){ var url = item.url; fetch(url).then(res => res.blob().then(blob => { // 创建隐藏的可下载链接 var a = document.createElement('a'); a.style.display = 'none'; a.href = URL.createObjectURL(blob); a.download = 'QRcode.jpg'; document.body.appendChild(a); a.click(); //移除元素 document.body.removeChild(a); this.downloading = false; })); }
***fetch 更加高效地进行网络请求
***一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。
***URL.createObjectURL() 静态方法会创建一个 DOMString
,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示指定的 File
对象或 Blob
对象。