下载后台的二进制文件

祁铭菲

已于 2022-04-29 14:47:14 修改

阅读量187

点赞数 1

于 2022-02-14 18:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39993715/article/details/122918473

版权

该博客介绍了如何使用axios库在前端实现不同类型的文件下载，包括设置responseType为'blob'，通过创建隐藏的a标签来触发文件下载，并详细说明了如何处理文件名和类型。内容涉及到Content-Disposition头的解析以及创建下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios({
    method: "post",
    url: "",
    responseType: 'blob'
}).then((res) => {
    if(0 < res.data.size) {
        const link = document.createElement('a');
        // fileType = application/vnd.ms-excel：表格
        // fileType = application/zip：压缩文件
        // fileType = image/jpeg：图片
        const blob = new Blob([res.data], {type: fileType})
        // 前台不设置名字则从后台获取
        if(!fileName) {
            //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xx.docx") 设置的文件名;
            let contentDisposition = res.headers['content-disposition']; 
            if (contentDisposition) {
                let fileNameReg = new RegExp("filename=([^;]+\\.[^\.;]+);*");
                fileName = fileNameReg.exec(contentDisposition)[1].replace(/^["](.*)["]$/g, "$1");
            }
        }
        link.style.display = 'none';
        link.download = decodeURI(fileName); //下载后文件名
        link.href = window.URL.createObjectURL(blob); //创建下载的链接
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(window.URL.createObjectURL(blob));
    }
});