当前位置：首页 > VUE

vue 实现文件下载

2026-02-19 00:55:20VUE

Vue 实现文件下载的方法

在 Vue 项目中实现文件下载可以通过多种方式完成，以下是几种常见的方法：

使用 `<a>` 标签下载

通过动态创建 <a> 标签并设置 download 属性实现文件下载。适用于已知文件 URL 的情况。

downloadFile(url, fileName) {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

通过 Blob 对象下载

当需要下载后端返回的二进制流数据时，可以使用 Blob 对象。

downloadBlob(data, fileName, fileType) {
  const blob = new Blob([data], { type: fileType });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(link);
}

使用 axios 下载文件

结合 axios 请求后端接口获取文件数据后下载。

axios({
  method: 'get',
  url: '/api/download',
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file.pdf';
  link.click();
});

使用 FileSaver.js 库

FileSaver.js 是一个专门用于客户端保存文件的 JavaScript 库，可以简化下载流程。

安装依赖：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver';

// 保存文本
saveAs(new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}), "hello world.txt");

// 保存图片
saveAs('https://example.com/image.png', 'image.png');

处理大文件下载

对于大文件下载，可以显示下载进度。

axios({
  method: 'get',
  url: '/api/large-file',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted + '% downloaded');
  }
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.download = 'large-file.zip';
  link.click();
});