标签:div code pos component rop == click none xls
需求:接收后端返回的文件流导出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])); }
href:接口地址
queryValues:传参
export function batchExport(href, queryValues) { const link = document.createElement(‘a‘); link.href = `${href}?${qs.stringify(queryValues)}`; link.download = ‘导出.xls‘; link.click(); }
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(‘下载失败‘); } } } }
每天进步一点点~
标签:div code pos component rop == click none xls
原文地址:https://www.cnblogs.com/abigting/p/12593510.html