当前位置：首页 > VUE

vue实现文件的下载

2026-01-20 08:04:08VUE

使用 `window.open` 方法

通过 window.open 直接打开文件链接触发下载，适用于简单的文件下载场景。
代码示例：

window.open('文件URL', '_blank');

使用 `<a>` 标签动态下载

动态创建 <a> 标签并触发点击事件，适用于需要隐藏下载链接或动态生成下载内容的场景。
代码示例：

const link = document.createElement('a');
link.href = '文件URL';
link.download = '文件名.扩展名'; // 设置下载的文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

通过 Blob 对象下载

适用于需要从后端获取二进制数据（如接口返回的文件流）的场景。
代码示例：

axios.get('文件API', { responseType: 'blob' }).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.download = '文件名.扩展名';
  link.click();
  window.URL.revokeObjectURL(url); // 释放内存
});

使用第三方库 `file-saver`

file-saver 库简化了文件下载流程，支持 Blob、File 对象等。
安装：

npm install file-saver

代码示例：

import { saveAs } from 'file-saver';

// 从URL下载
saveAs('文件URL', '文件名.扩展名');

// 从Blob下载
const blob = new Blob([data], { type: 'application/octet-stream' });
saveAs(blob, '文件名.扩展名');

处理大文件分片下载

对于大文件，可通过分片下载提升用户体验。
代码逻辑：

vue实现文件的下载

async function downloadLargeFile(url, fileName) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const chunks = [];
  let receivedLength = 0;

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
    receivedLength += value.length;
    console.log(`已下载 ${receivedLength} 字节`);
  }

  const blob = new Blob(chunks);
  saveAs(blob, fileName);
}

注意事项

跨域问题：确保文件URL支持跨域访问，或通过后端代理请求。
文件名编码：后端可通过响应头 Content-Disposition 指定文件名，例如：
```
Content-Disposition: attachment; filename*=UTF-8''%E6%96%87%E4%BB%B6.txt
```
权限控制：敏感文件需在后端校验权限后再允许下载。