当前位置：首页 > VUE

vue文件下载实现方式

2026-01-23 05:10:17VUE

vue文件下载实现方式

使用a标签下载

通过创建a标签并设置download属性实现文件下载。适用于已知文件URL或Blob对象的情况。

// 方法1: 直接使用URL
const downloadFile = (url, fileName) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 方法2: 使用Blob对象
const downloadBlob = (blob, fileName) => {
  const url = window.URL.createObjectURL(blob);
  downloadFile(url, fileName);
  window.URL.revokeObjectURL(url); // 释放内存
};

使用axios下载文件

通过后端API获取文件流，转换为Blob后下载。适用于需要身份验证或动态生成文件的场景。

axios({
  method: 'get',
  url: '/api/download',
  responseType: 'blob',
}).then(response => {
  const blob = new Blob([response.data]);
  downloadBlob(blob, 'file.pdf');
});

使用FileSaver.js库

FileSaver.js简化了文件保存操作，支持跨浏览器兼容性。

import { saveAs } from 'file-saver';

// 使用URL下载
saveAs('https://example.com/file.pdf', 'custom-name.pdf');

// 使用Blob下载
const blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
saveAs(blob, 'hello.txt');

处理大文件分片下载

对于大文件，可采用分片下载并合并的方式。

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

  for (let start = 0; 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 mergedBlob = new Blob(chunks);
  downloadBlob(mergedBlob, fileName);
};