前端接收后端返回的文件流导出Excel

Posted abigting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端接收后端返回的文件流导出Excel相关的知识,希望对你有一定的参考价值。

需求:接收后端返回的文件流导出Excel

自己项目中遇到过,亲测有效

情况二使用过程中解决的问题:

1.直接接受的文件流下载格式为txt且乱码。需要通过 下面这句代码来转成Excel:

 let url = new Blob([xmlHttp.response], { type: ‘application/vnd.ms-excel‘ });

2.文件名乱码,显示数字单词组成的随机字符串。需要后端在header中返回文件名,转义获取

//文件名
link.download = decodeURIComponent(xmlHttp.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]);

3.IE或者360兼容模式下,无法下载

//兼容IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
let url = new Blob([xmlHttp.response], { type: ‘application/vnd.ms-excel‘ });
window.navigator.msSaveOrOpenBlob(url, decodeURIComponent(xmlHttp.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]));
}

情况一:无需传token

href:接口地址
queryValues:传参
export function batchExport(href, queryValues) {
const link = document.createElement(‘a‘);
link.href = `${href}?${qs.stringify(queryValues)}`;
link.download = ‘导出.xls‘;
link.click();
}

情况二:header中传token,兼容IE,360兼容模式,文件名不会乱码

decodeURIComponent(xmlHttp.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1] //从header中获取文件名,需后端提供,如果是前端定义的文件名,可直接 link.download = ‘文件名XXX‘
href:接口地址
queryValues:传参
export function batchExport(href, queryValues) {
  let xmlHttp = null;
  if (window.ActiveXObject) {
    xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);
} else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
}
  if (xmlHttp != null) {
xmlHttp.ContentType = ‘application/vnd.ms-excel‘;
xmlHttp.open(‘get‘, `${href}?${qs.stringify(queryValues)}`, true);
xmlHttp.setRequestHeader(‘token‘, getUserInfo().token);
xmlHttp.responseType = ‘blob‘;
xmlHttp.send();
xmlHttp.onreadystatechange = doResult;
}

  function doResult() {
    let link = document.createElement(‘a‘);
    link.style.display = ‘none‘;
    if (xmlHttp.readyState === 4) {
      if (xmlHttp.status === 200) {
        //兼容IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let url = new Blob([xmlHttp.response], { type: ‘application/vnd.ms-excel‘ });
window.navigator.msSaveOrOpenBlob(url, decodeURIComponent(xmlHttp.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]));
}else{
      //其他浏览器
let url = createObjectURL((new Blob([xmlHttp.response],
{ type: ‘application/vnd.ms-excel‘ })));
        //文件名
link.download = decodeURIComponent(xmlHttp.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]);
link.href = url;
link.click();
}
      } else {
        message.error(‘下载失败‘);
}
    }
  }
}

 每天进步一点点~

以上是关于前端接收后端返回的文件流导出Excel的主要内容,如果未能解决你的问题,请参考以下文章

前端接收后端文件流导出excel文档遇到的问题

java后端返回多个文件给前端打开

js将后端返回的文件流导出为excel,并自定义下载文件名

js将后端返回的文件流导出为excel,并自定义下载文件名

纯前端导出表格

vue中使用axios处理post方法导出excel表格(后端返回文件流)