当前位置：首页 > VUE

vue实现指定文件下载

2026-02-25 05:08:46VUE

实现指定文件下载的方法

在Vue中实现指定文件下载，可以通过以下几种方式完成。这些方法适用于前端直接下载已知URL的文件或通过后端API获取文件。

使用`<a>`标签下载

通过创建隐藏的<a>标签并设置download属性，可以直接触发文件下载。这种方法适用于已知文件URL的情况。

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = '文件URL'; // 替换为实际文件URL
      link.download = '文件名.扩展名'; // 设置下载文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

通过Blob对象下载

如果需要从后端API获取文件数据（如二进制流），可以使用Blob对象和URL.createObjectURL方法实现下载。

vue实现指定文件下载

<template>
  <button @click="downloadFileFromAPI">从API下载文件</button>
</template>

<script>
export default {
  methods: {
    async downloadFileFromAPI() {
      try {
        const response = await fetch('API地址'); // 替换为实际API地址
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件名.扩展名'; // 设置下载文件名
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
}
</script>

使用第三方库

对于更复杂的下载需求（如分块下载、进度显示等），可以使用第三方库如axios或file-saver。

安装file-saver：

vue实现指定文件下载

npm install file-saver

示例代码：

<template>
  <button @click="downloadWithFileSaver">使用file-saver下载</button>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    async downloadWithFileSaver() {
      const response = await fetch('API地址');
      const blob = await response.blob();
      saveAs(blob, '文件名.扩展名');
    }
  }
}
</script>

处理后端返回的文件流

如果后端返回的是文件流，可以通过设置responseType为blob来正确处理响应。

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

<script>
export default {
  methods: {
    async downloadStream() {
      const response = await axios.get('API地址', {
        responseType: 'blob'
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.download = '文件名.扩展名';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>