js-当后端直接返回文件流而不是返回的阿里云在线链接地址时下载excel文件

 接口处处理-指定响应类型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();
                });
        };