a标签加download属性，可直接下载图片的两种方式（而不是预览）

写项目碰到过两次需求是要点击直接下载图片的，一个是vue项目，一个是在react的项目，两种方法，仅此记录以便查看。

众所周知，a标签加download属性可以实现大部分文件的点击直接下载（如zip），但是部分文件（如jpg，pdf等浏览器可以直接识别的文件）会直接打开，而不是下载。

以下提供两种实践过并且有效的方法，仅供参考。

一、加文件名后缀 ?response-content-type=application/octet-stream

<a :href=`${result.imageUrl}?response-content-type=application/octet-stream` download target="_blank" >
	<img :src="result.imageUrl"/>
</a>

加文件名后缀的在vue项目就实现了点击图片直接下载的效果，但是后面在react项目中，遇到同样的问题，再用又没有了效果，于是找到了第二种方法。

二、将图片转化为blob格式

先写一个downloadFile的函数

export const downloadFile = (url, downloadName = '') => {
  // console.log(url);
  const link = document.createElement('a');
  fetch(url).then(res => res.blob()).then((blob) => {
    link.href = URL.createObjectURL(blob);
    // console.log(link.href)
    link.download = downloadName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
};

使用：

<Button
	type="secondary"
	onClick={() => {
		downloadFile(image_url, 'product image');
     }}
>Download</Button>