前端Ajax请求从后端获取二进制文件并下载

大家都知道前端的下载除了最简单的a标签href，还有时候需要验证token，此时后台会给一个返回二进制的下载接口。如果你用ajax普通的get，post请求，接口会返回乱码。那么本文就带你封装一个处理二进制下载的方法。

1.设置responseType为arraybuffer

这是正确获取二进制的关键，否则会被当成json文本来解析。

const response = await axios({
  method,
  url,
  data,
  responseType: 'arraybuffer',
  headers,
});

2.判断是否下载成功

只有下载成功的时候返回的才是arraybuffer，否则是包含错误信息的json，因此在这里我们通过响应头的contentType来判断。

if (contentType?.includes('application/json')) {
  // 响应的是json则提示错误信息
  const res = JSON.parse(new TextDecoder('utf-8').decode(new Uint8Array(response.data)));
  if (res.code !== 200) {
    ElMessage({
      message: res.msg,
      type: 'error',
      duration: 5 * 1000
    });
    return;
  }
}

3.获取blobUrl

// blobType可以是空对象{}，或指定的excel等MIME类型
const data = new Blob([response.data], blobType); 
const src = window.URL.createObjectURL(data);

4.下载文件

传入获取到的blobUrl，可以用第三方库file-saver下载，也可以用a标签的download属性。file-saver对各浏览器做了blob等兼容处理。

import { saveAs } from 'file-saver';

// 第一种 使用第三方库 file-saver
saveAs(src, filename); 

// 第二种 a标签
function aTagDownload(src, filename) {
  const link = document.createElement('a');
  link.href = src;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
  window.URL.revokeObjectURL(src);
}

完整代码

/**
 * 下载二进制文件
 * @param {string} method 必填 请求方式
 * @param {string} url 必填 下载 url
 * @param {object} [data={}] post 请求的 data
 * @param {object} [headers={}] 请求的 headers
 * @param {string} [filename=下载.zip] 保存的文件名，默认为下载.zip
 * @param {boolean} [isDownload=true] 是否直接下载，默认为 true
 * @param {object} [blobType={}] 指定 blob MIME 类型，默认为{}
 * @returns {string} blobUrl
 */
export async function getBufferFile(
  method,
  url,
  data = {},
  headers = {},
  filename = '下载.zip',
  isDownload = true,
  blobType = {},
) {
  headers = {
    ...headers,
    Authorization: localStorage.getItem('token'),
  };

  ElMessage.success('已开始下载');

  try {
    const response = await axios({
      method,
      url,
      data,
      responseType: 'arraybuffer',
      headers,
    });
    const contentType = response.headers['content-type'];

    // 根据响应头的contentType判断是否下载成功
    if (contentType?.includes('application/json')) {
      // 响应的是json则提示错误信息
      const res = JSON.parse(new TextDecoder('utf-8').decode(new Uint8Array(response.data)));
      if (res.code !== 200) {
        ElMessage({
          message: res.msg,
          type: 'error',
          duration: 5 * 1000
        });
        return;
      }
    } else {
      const data = new Blob([response.data], blobType);
      const src = window.URL.createObjectURL(data);
      // 从响应头获取文件名
      if (response.headers['content-disposition']) {
        filename = decodeURI(
          response.headers['content-disposition'].split('filename=')[1]
        );
      }

      if (isDownload) {
        saveAs(src, filename); // 使用第三方库 file-saver
      }
      
      return src;
    }
  } catch (error) {
    console.error('下载文件失败：', error);
    ElMessage.error('下载文件失败');
  }
}