下载图片信息和指定的图片

Posted 2020-11-04 薄荷凉凉凉

以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 对象。