前端JS接收后端文件流实现文件下载

528 阅读1分钟

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

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

情况一:无需传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兼容模式,文件名不会乱码

export function batchExport(href, queryValues) {  let xmlHttp = null;  if (window.ActiveXObject) {    // IE6, IE5 浏览器执行代码    xmlHttp = new window.ActiveXObject('Microsoft.XMLHTTP');  } else if (window.XMLHttpRequest) {    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlHttp = new XMLHttpRequest();  }  //2.如果实例化成功,就调用open()方法:  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.download = name;//设置a标签的下载名字    link.style.display = 'none';    if (xmlHttp.readyState === 4) { //4表示执行完成      if (xmlHttp.status === 200) { //200表示执行成功        // 字符内容转变成blob地址        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('下载失败');      }    }  }}


每天进步一点点~