vue3 下载图片或者文件类型

在 Vue 3 中，你可以使用 `<a>` 标签的 `download` 属性来下载图片或文件。下面是一个例子：

<template>
  <div>
    <a :href="imageUrl" download="image.jpg">Download Image</a>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      fileUrl: 'https://example.com/file.pdf'
    }
  },
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = this.fileUrl;
      link.download = 'file.pdf';
      link.click();
    }
  }
}
</script>

在上面的例子中，我们使用了一个 `<a>` 标签来下载图片，通过给 `href` 属性赋值图片的 URL，然后将 `download` 属性设置为想要保存的文件名。点击 "Download Image" 链接时，浏览器会下载该图片。

而对于文件的下载，我们创建了一个 `<button>` 元素，并在点击事件触发时，使用 JavaScript 动态创建 `<a>` 标签进行文件下载。我们将文件的 URL 赋值给 `href` 属性，将要保存的文件名赋值给 `download` 属性，然后模拟点击 `<a>` 标签来触发文件下载。