vue项目使用axios下载后端返回的二进制文件流，以及使用form表单形式下载文件，两种方式对比总结

1.手动创建表单的形式

缺点：无法设置请求头参数，出现异常会跳转到表单提交的错误页面

优点：交给浏览器去处理下载的流程，无需关心过多操作

downloadQrcode() {
 const paramObj: any = {
    token: getToken(),
    orderId: this.orderId
  };

  const form = document.createElement('form');
  form.action = '接口地址';
  form.method = '请求类型';
  form.style.display = 'none';
  Object.keys(paramObj).forEach((key) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;
    input.value = paramObj[key];
    form.appendChild(input);
  });
  const button = document.createElement('input');
  button.type = 'submit';
  form.appendChild(button);
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

2. 使用axios实现异步下载文件

缺点：需要手动维护下载信息，比如下载按钮状态，接口请求时间可能较长

优点：可以设置请求头，可以进行下载拦截

import fileDownload from 'js-file-download';
import axios from 'axios';


axios.get(
  url,
  {
    params,
    headers: {
      'Content-Type': 'application/json; application/octet-stream'
    },
    responseType: 'blob'
  }
).then((res) => {
  const data = res.data;
  const fileReader = new FileReader();

  // 进行对象装换，避免将后端接口返回的错误信息也当成文件下载
  fileReader.onload = (event) => {
    try {
      const jsonData = JSON.parse(event.target.result);
      if (jsonData.status === 'fail') {
        // 解析成对象失败，说明是普通对象数据
        console.log(`下载提示： ${jsonData.message}`);
      }
    } catch (err) {
      // 解析成对象失败，说明是正常的文件流，可进行下载

      // 获取文件名
      const disposition = decodeURI(res.request.getResponseHeader('Content-Disposition'));
      let fileName = '';
      const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
      const matches = filenameRegex.exec(disposition);
      if (matches != null && matches[1]) {
        fileName = matches[1].replace(/['"]/g, '');
      }
      fileDownload(res.data, fileName);
    }
  };
  fileReader.readAsText(data);
}).catch((error) => {
  // 文件下载异常处理
});