当前位置：首页 > VUE

vue 实现下载功能

2026-01-21 10:26:43VUE

使用 `window.open` 直接下载

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

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

使用 `<a>` 标签下载

动态创建 <a> 标签并设置 download 属性，适合需要自定义文件名的情况。

const link = document.createElement('a');
link.href = '文件URL';
link.download = '自定义文件名.txt'; // 设置下载文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

通过 Blob 对象下载

适用于需要处理二进制数据或后端返回文件流的场景。

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

下载后端返回的 Base64 数据

将 Base64 数据转换为 Blob 后下载。

function downloadBase64(base64Data, fileName) {
  const byteCharacters = atob(base64Data.split(',')[1]);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.click();
}

封装为 Vue 方法

在 Vue 组件中封装可复用的下载方法。

methods: {
  downloadFile(url, fileName) {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName || url.split('/').pop();
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

处理大文件分片下载

通过 Range 请求头实现大文件分片下载。

async function downloadLargeFile(url, fileName, chunkSize = 1024 * 1024) {
  const response = await fetch(url, { headers: { Range: `bytes=0-${chunkSize}` } });
  const totalSize = parseInt(response.headers.get('content-range').split('/')[1]);
  const blob = await response.blob();
  const chunks = [blob];

  for (let start = chunkSize; start < totalSize; start += chunkSize) {
    const end = Math.min(start + chunkSize, totalSize);
    const chunkResponse = await fetch(url, { headers: { Range: `bytes=${start}-${end}` } });
    chunks.push(await chunkResponse.blob());
  }

  const finalBlob = new Blob(chunks);
  const link = document.createElement('a');
  link.href = URL.createObjectURL(finalBlob);
  link.download = fileName;
  link.click();
}