JavaScript学习笔记（三）：a标签图片下载本地，而非直接打开

前言 ：在使用a标签下载图片，很多浏览器会默认直接打开网页，而不是下载本地，今天我们就来解决这个问题吧

1、错误写法

虽然加上了download属性，但是依旧无法实现图片下载，这是因为很多浏览器能够识别图片，会自动打开

<a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" download="image.png">下载</a>

2、解决办法

html文档：

<button (click)="downloadImage()">下载</button>

.js文件：

downloadImage(){
 	// 将链接地址字符内容转变成blob地址, 解决图片下载直接打开问题
 	// url 为图片地址
 	const url="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
	fetch(url).then(async res => await res.blob()).then((blob) => {
	  // 创建隐藏的可下载链接
	  const a = document.createElement('a');
	  a.style.display = 'none';
	  a.href = URL.createObjectURL(blob);
	  // 保存下来的文件名
	  a.download = 'image.png';
	  document.body.appendChild(a);
	  a.click();
	  // 移除元素
	  document.body.removeChild(a);
	})  
}