Vue下载Url图片而非直接浏览器打开

将图片转为 Blob 格式，然后再构造一个 a 标签来请求这个文件。

downloadImage() {
  let link = document.createElement('a');
  let url = this.fileUrl;
  // 这里是将url转成blob地址
  fetch(url).then(res => res.blob()).then(blob => { 
	link.href = URL.createObjectURL(blob);
	console.log(link.href);
	link.style.display = 'none';
	link.download = this.fileName;
	link.click();
  });
}

这里使用了 fetch 方法，fetch 的基本用法非常简单，只需要传递请求的 URL 作为参数，然后通过 Promise 实例的 then 方法获取响应的结果即可。

它会有一个返回值 res，这个返回值有一些很有意思的内置函数，如：

• res.text() ：返回 URL 的文本内容。如果是网站，则返回 HTML。

• res.json() ：返回格式化的 JSON 数据。

• res.blob() : 返回 blob 数据。

• res.arrayBuffer()：返回数组缓冲区数据。

• res.formData() ：返回 formData 数据。