【前端下载二进制文件的两种方法】

1.使用form表单下载

form表单方式下载的文件名字是后台默认的

export function postDownloadFile(url, params){
  console.log(url, params)
  let form = document.createElement("form");
  form.setAttribute("style", "display:none;");
  form.setAttribute("method", "post");
  form.setAttribute("action", url);

  if(params){
    Object.keys(params).forEach(key=>{
      if(Array.isArray(params[key])){
        // value_list = []
        params[key].forEach(value=>{
          let input_item = document.createElement("input");
          input_item.name = key;
          input_item.value = value;
          form.appendChild(input_item);
        })
      }else{
        let input_item = document.createElement("input");
        input_item.name = key;
        input_item.value = params[key];
        form.appendChild(input_item);
      }
    })
  }
  console.log('----------------------form', form)
  document.body.appendChild(form);
  //根据需求是否添加
  // let windowName = 'Download(' + (new Date().getTime()) + ')';
  // let w = window.open('', windowName);
  form.target = '_blank';
  form.submit();
  form.remove();
  // w.close();
}

2.a标签下载

接口设置

{
    responseType:'blob',
    headers:{ 'Content-Type': 'application/json; application/octet-stream'}
}

下载

let blob = new Blob([response.data], {type: "application/vnd.ms-excel"})
let url = URL.createObjectURL(blob)
let link = document.createElement('a')
//不设置导出文件名时,导出的文件名是乱码
link.download = '自定义文件名.文件格式'
link.href = url
link.click()
link.remove()

不设置文件名时下载的文件,如下图

a标签下载文件可通过headers获取文件名

let filename = res.headers["content-disposition"].split('filename=')[1]

需要后端设置并放开

response.setHeader("Access-Control-Expose-Headers", "content-disposition");