记一次vue将列表下载为excel的兼容写法
需求需要将后端返回的列表数据下载到本地,查询资料发现采用blob文件流下载
1、后端返回的是blob文件流,传统的模拟href点击在IE下不兼容,无法下载 故采用兼容写法如下
/* 批量文件下载 */
export function listFileDownload(params) {
api({
url: '/mweb/mcif.TellerListDownLoad.do',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;application/octet-stream'
},
transformRequest: [() => {
let ret = ''
for (let i in params) {
ret += encodeURIComponent(i) + '=' + encodeURIComponent(params[i]) + '&'
}
return ret
}],
data: params,
responseType: 'blob'
}).then(res => {
if ('msSaveOrOpenBlob' in navigator) {
var data = res
var blob = new Blob([data], { type: 'application/vnd.ms-excel' })
window.navigator.msSaveOrOpenBlob(data, 'MSPOptJnl' + new Date().getTime() + '.xls')
} else {
let blob = new Blob([res])
let downloadElement = document.createElement('a')
let href = URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = 'mcif.TellerList_' + new Date().getTime() + '.xls'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
}
})
.catch(err => {
console.log(err);
})
}
2、后端列返回的是纯数组,采用模板拼接数据,IE采用msSaveBlob进行下载,chorme还是采用模拟点击,具体如下
/* 文件下载 */
export function fileDownload(params) {
api({
url: 'msp.MspTransOprtJnl.do',
method: 'post',
data: params,
}).then(res => {
let str = `机构编号,机构名称,MSP客户编号,客户姓名,操作内容,操作起止日期\n`;
let name = ['TransDeptId', 'TransDeptName', 'OptId', 'OptName', 'TransBusGroupName', 'TransDate']
// 增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < res.List.length; i++) {
for (const key in res.List[i]) {
for (let j = 0; j < name.length; j++) {
if (key == name[j]) {
str += `${res.List[i][key] + '\t'},`;
}
}
}
str += '\n';
}
if ('msSaveOrOpenBlob' in navigator) {
var blob = new Blob([decodeURIComponent(encodeURI(str))], { type: "text/csv;charset=utf-8;" });
navigator.msSaveBlob(blob, 'MSPOptJnl' + new Date().getTime() + '.xls');//filename文件名包括扩展名,下载路径为浏览器默认路径
} else {
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
// 通过创建a标签实现
const link = document.createElement("a");
link.href = uri;
// 对下载的文件命名
link.download = 'MSPOptJnl' + new Date().getTime() + '.xls';
link.click();
}
})
.catch(err => {
console.log(err);
})
}