vue中实现点击下载图片

Vue中实现点击下载图片的方法可以使用HTML5中的标签的 download 属性或者通过JS来实现。
使用标签的 download 属性可以直接在html中进行设置，例如：

<a href="https://example.com/image.jpg" download>下载图片</a>

通过JS实现可以使用创建URL对象的方法，代码如下：

// 下载图片 async downloadImage(e) { // 获取图片对象和画布对象 const imgUrl = https://example.com/image.jpg const response = await fetch(imgUrl) const blob = await response.blob() // 创建下载链接 const url = window.URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'image.png' document.body.appendChild(link) link.click() document.body.removeChild(link) // 释放 Blob URL window.URL.revokeObjectURL(url) }

以上代码通过fetch获取图片并转化为blob类型，然后利用URL.createObjectURL创建下载链接，通过创建的标签的 click() 方法来实现下载，最后移除新建的 标签和已经使用过的 URL 对象。