前端下载文件时如何后端返回的文件流一些常见方法

// 假设你从后端获取到文件流（Blob）
fetch('/path/to/your/file')
  .then(response => response.blob())  // 获取文件流（Blob）
  .then(blob => {
    // 创建一个临时的 URL 来指向这个 Blob
    const url = window.URL.createObjectURL(blob);

    // 创建一个下载链接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 设置下载文件的名称

    // 模拟点击下载
    link.click();

    // 释放 URL 对象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

fetch('/path/to/your/file')
  .then(response => response.arrayBuffer())  // 获取文件流（ArrayBuffer）
  .then(arrayBuffer => {
    // 将 ArrayBuffer 转换为 Blob
    const blob = new Blob([arrayBuffer]);

    // 创建一个临时的 URL 来指向这个 Blob
    const url = window.URL.createObjectURL(blob);

    // 创建一个下载链接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 设置下载文件的名称

    // 模拟点击下载
    link.click();

    // 释放 URL 对象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

import axios from 'axios';

axios.get('/path/to/your/file', { responseType: 'blob' })
  .then(response => {
    const blob = response.data;

    // 创建一个临时的 URL 来指向这个 Blob
    const url = window.URL.createObjectURL(blob);

    // 创建一个下载链接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 设置下载文件的名称

    // 模拟点击下载
    link.click();

    // 释放 URL 对象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

axios({
  url: '/path/to/your/file',
  method: 'GET',
  responseType: 'blob', // 请求文件流
})
  .then(response => {
    const blob = response.data;

    // 获取文件名，通常从响应头获取
    const contentDisposition = response.headers['content-disposition'];
    const filename = contentDisposition
      ? contentDisposition.split('filename=')[1].replace(/"/g, '')
      : 'default_filename.ext';

    // 创建一个临时的 URL 来指向这个 Blob
    const url = window.URL.createObjectURL(blob);

    // 创建一个下载链接
    const link = document.createElement('a');
    link.href = url;
    link.download = filename; // 设置下载文件的名称

    // 模拟点击下载
    link.click();

    // 释放 URL 对象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

fetch('/path/to/your/file', { timeout: 5000 })  // 设置超时为 5 秒
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    // 处理 Blob 文件流并下载
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext';
    link.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });