前端保存二进制文件流返回excel-利用隐藏表单

前言：前端导出excel，之前一直是后端返回文件一个链接（直接下载）。这次excel导出采用后端返回二进制流，前端接收后通过blob去下载，但是会出现乱码的情况，网上找资料说需要设置responseType，然而设置了也没用，这里记录下我最后实现的方式

遇到的问题

返回的结果截图.png

chrome 调试preview截图.png

• 原来的代码（就算设置了responseType，excel还是乱码）

 axios.post('url',
    {params:data},
    {responseType: 'blob'}
  ).then(function (response) {
  debugger;
  const content = response;
  const blob = new Blob([content], {type: 'application/ms-excel'});
  const fileName = '表格.xls';
  if ('download' in document.createElement('a')) { // 非IE下载
  const link = document.createElement('a');
  link.download = fileName;
  elink.style.display = 'none';
  link.href = URL.createObjectURL(blob);
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href); // 释放URL 对象
  document.body.removeChild(link);
} else { // IE10+下载
  navigator.msSaveBlob(blob, fileName);
}
})
  .catch(function (error) {
  console.log(error);
});

解决方法

• 反复修改以上代码，还是无法正常下载后，我放弃了axios，利用隐藏表单解决

export function exportForm (data) {
    let form = document.createElement('form'); //创建form标签
    form.setAttribute("style","display:none");
    form.setAttribute("method","post");//设置请求方式
    let exportData = ''  //设置发送后台数据
    for (let key in data) {
        if (data[key]) {
            exportData += key + '=' + data[key] + '&'
        }
    }
    form.setAttribute("action",publicHost+"url?"+exportData); //action属性设置请求路径
    document.body.append(form); //页面添加form标签
    
    let input1 = document.createElement("input") //创建input标签
    input1.setAttribute("type","hidden") //设置隐藏域
    
    form.append(input1);
    form.submit();//表单提交即可下载！
    document.body.removeChild(form); //页面删除form标签
}

总结

• 在上述方法成功之后，我试过在axios设置
  {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}，然而并没有用，下载的excel还是乱码。。。心塞塞

如果有小伙伴遇到类似情况的，希望可以分享下～～～