接口处处理-指定响应类型responseType: 'blob'
const downloadMedicationOrderGroupStatisticsList = async (data: DataModel): Promise<string> => {
const url = `/XMedicationOrder/statistic/outHospital/complex/downloadMedicationOrderGroupStatisticsList`;
// eslint-disable-next-line no-return-await
return await $http.post(url, data, { responseType: 'blob' });
};
// 当后端直接返回文件流而不是返回的阿里云在线链接地址时下载excel文件
const downloadNow = async () => {
commonUtils.showLoading();
const excelDownloadInfo = (await useMedicationService().downloadMedicationOrderGroupStatisticsList({
...props.searchInfo,
downloadSourceId: '1',
})) as any;
console.log(excelDownloadInfo);
console.log(decodeURI(excelDownloadInfo.contentDisposition.split('Filename=')[1]));
// 如果后端返回的result是进过Blob处理的,直接 window.URL.createObjectURL()
// 如果没有,就需要先实例化一个Blob对象,再window.URL.createObjectURL()
// const blob = new Blob([JSON.stringify(excelDownloadInfo.data) as any], {
// type: 'application/vnd.ms-excel',// 指定类型
// });
// 创建标签
const link = document.createElement('a');
link.style.display = 'none';
// 设置标签href属性为文件路径
link.href = URL.createObjectURL(excelDownloadInfo);
// 截取接口给的文件名
const fileName = decodeURI(excelDownloadInfo.contentDisposition.split('Filename=')[1]) || '科室开方数统计';
// 设置下载文件名
link.download = fileName;
document.body.appendChild(link);
// 点击触发下载
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(URL.createObjectURL(excelDownloadInfo));
commonUtils.hideLoading();
};
响应拦截器加入下方代码,用来获取后端给的文件名
代码如下
if (response.headers['content-disposition']) {
// 将响应文件名信息直接添加挂载response.data
response.data.contentDisposition = response.headers['content-disposition'];
}
效果展示:
当后端返回阿里云在线文件链接,怎样下载,方法如下:
此时接口处不做特殊处理。
const getBlob = (url: string) => {
return new Promise((resolve) => {
const XML = new XMLHttpRequest();
XML.open('GET', url, true);
XML.responseType = 'blob';
XML.onload = () => {
if (XML.status === 200) {
resolve(XML.response);
}
};
XML.send();
});
};
// 下载文件
const saveAs = (blob: any, filename: string) => {
const elelink = document.createElement('a');
elelink.style.display = 'none';
elelink.download = filename;
elelink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elelink);
elelink.click();
document.body.removeChild(elelink);
};
const downloadNow = () => {
commonUtils.showLoading();
useMedicationService()
.downloadMedicationOrderGroupStatisticsList({ ...props.searchInfo, downloadSourceId: '2' })
.then((res) => {
commonUtils.hideLoading();
if (res) {
getBlob(res).then((blob) => {
saveAs(blob, '药品维度统计');
});
}
})
.catch((err: any) => {
commonUtils.alert(err.responseText || '获取信息失败', { type: 'error' });
})
.finally(() => {
commonUtils.hideLoading();
});
};