当前位置：首页 > VUE

vue实现get下载

2026-02-17 03:37:37VUE

vue实现get下载

使用axios发起GET请求下载文件，结合Blob对象和URL.createObjectURL实现文件下载。

vue实现get下载

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

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get('https://example.com/file.pdf', {
          responseType: 'blob'
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

处理后端返回的文件流

当后端返回文件流时，需要正确设置响应类型并处理Blob数据。

vue实现get下载

async downloadStream() {
  const response = await axios.get('/api/download', {
    responseType: 'blob',
    params: {
      fileId: '123'
    }
  });

  const contentDisposition = response.headers['content-disposition'];
  let fileName = 'default.pdf';
  if (contentDisposition) {
    const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
    if (fileNameMatch.length > 1) {
      fileName = fileNameMatch[1];
    }
  }

  const blobUrl = URL.createObjectURL(response.data);
  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(blobUrl);
}

添加下载进度显示

通过axios的onDownloadProgress回调显示下载进度。

async downloadWithProgress() {
  const response = await axios.get('/large-file.zip', {
    responseType: 'blob',
    onDownloadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`下载进度: ${percentCompleted}%`);
      // 可以更新UI显示进度
    }
  });

  // 处理下载完成后的逻辑
}

处理大文件分片下载

对于大文件，可以考虑实现分片下载以提高可靠性。

async downloadLargeFile() {
  const CHUNK_SIZE = 1024 * 1024; // 1MB
  let receivedBytes = 0;
  let chunks = [];

  while(true) {
    const response = await axios.get('/large-file', {
      responseType: 'blob',
      headers: {
        'Range': `bytes=${receivedBytes}-${receivedBytes + CHUNK_SIZE - 1}`
      }
    });

    if (response.status === 206) {
      chunks.push(response.data);
      receivedBytes += response.data.size;
    } else if (response.status === 200) {
      chunks.push(response.data);
      break;
    }

    if (response.data.size < CHUNK_SIZE) {
      break;
    }
  }

  const completeBlob = new Blob(chunks);
  const url = URL.createObjectURL(completeBlob);
  // 创建下载链接...
}