Vue如何实现将后端返回二进制文件在浏览器自动下载

export function downloadFile(fileName) {
  axios({
    method: 'post',
    url: process.env.VUE_APP_BASE_API + '/cgi-bin/file',
    data: {
      'X-Token': getToken(),
      method: 'download',
      data: {
        filename: fileName
      }
    },
    responseType: 'blob'
  }).then((res) => {
    const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob
    const a = document.createElement('a');
    const url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
    a.href = url;
    a.download = fileName; // 设置下载文件名
    a.style.display = 'none'; //避免数据量过大,下载时间长，看到a标签
    document.body.appendChild(a);
    a.click();//关键；调用点击事件，(模拟a标签的点击下载效果)
    document.body.removeChild(a); // 下载完成移除元素
    window.URL.revokeObjectURL(url); // 释放内存
  });
}

 const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob

 const a = document.createElement('a');
 const url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
 a.href = url;
 a.download = fileName; // 设置下载文件名
 a.style.display = 'none'; //避免数据量过大,下载时间长，看到a标签
 document.body.appendChild(a);
 a.click(); //关键；调用点击事件，(模拟a标签的点击下载效果)
 document.body.removeChild(a); // 下载完成移除元素
 window.URL.revokeObjectURL(url); // 释放内存