Vue3 下载图片：如何直接下载而不是浏览器查看

<template>
  <div>
    <button @click='downloadImage'>Download Image</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadImage() {
      const link = document.createElement('a');
      link.href = 'https://example.com/image.jpg'; // 图片的链接地址
      link.download = 'image.jpg'; // 下载后的文件名
      link.target = '_blank'; // 在新标签页中打开链接（可选）
      link.click();
    }
  }
}
</script>
<p>在上面的示例中，当点击按钮时，会创建一个 '<a>' 元素，将图片的链接地址赋值给 'href' 属性，将下载后的文件名赋值给 'download' 属性，然后模拟点击该链接。这样就会触发浏览器的下载功能，而不是直接在浏览器中查看图片。</p>