前端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-saversaveAs(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('下载文件失败');  }}