Vue3 下载文件的方法

在 Vue3 开发中，实现文件下载功能是一个常见的需求。以下将为大家介绍几种常见的 Vue3 下载文件的方法。

首先是通过 a 标签实现简单的文件下载。当你有一个已知的文件链接时，可以利用 a 标签的 download 属性来触发下载。例如：

<template>
  <a :href="fileUrl" download="example.txt">下载文件</a>
</template>

<script setup>
import { ref } from 'vue';

const fileUrl = ref('your-file-url');
</script>

在这个例子中，只要将 fileUrl 替换为实际的文件链接，用户点击链接就会触发文件下载，并将文件名命名为 example.txt。

如果文件内容是通过接口获取的二进制数据，就需要更复杂的处理。此时可以使用 Blob 和 URL.createObjectURL 方法。示例代码如下：

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script setup>
import { ref } from 'vue';

const downloadFile = async () => {
  try {
    const response = await fetch('your-api-url');
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-file.txt';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载文件出错:', error);
  }
};
</script>

这段代码中，首先通过 fetch 从接口获取文件的二进制数据，然后将其转换为 Blob 对象，再创建一个临时的 URL 供 a 标签使用，从而实现文件下载。最后记得移除创建的 a 标签和撤销临时 URL。

另外，使用第三方库 axios 也能方便地处理文件下载。首先安装 axios，然后在代码中引入使用：

<template>
  <button @click="downloadWithAxios">下载文件</button>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const downloadWithAxios = async () => {
  try {
    const response = await axios.get('your-api-url', {
      responseType: 'blob'
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file-using-axios.txt';
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载文件出错:', error);
  }
};
</script>

在这个示例中，axios 的 responseType 设置为 blob 来获取二进制数据，后续处理与前面类似。

通过以上几种方法，你可以根据项目的实际需求，灵活选择合适的方式在 Vue3 中实现文件下载功能。无论是简单的链接下载，还是复杂的接口数据下载，都能轻松应对。