后端返回二进制文件前端实现下载

最新推荐文章于 2025-04-17 16:10:37 发布

smile@qingqing

最新推荐文章于 2025-04-17 16:10:37 发布

阅读量669

点赞数

分类专栏：前端之路文章标签：文件下载乱码

本文链接：https://blog.youkuaiyun.com/weixin_43363871/article/details/115759581

版权

前端之路专栏收录该内容

46 篇文章

订阅专栏

后端返回的内容

在这里插入图片描述
传参后拿到的是上图显示的结果，前端如何实现下载此文件为excle或者zip呢？一起来看看吧：

前端实现下载

在项目封装的统一请求的文件中加入responseType : "blob"即可。

注意：该代码应与headers并列而不是包含，我在项目中不小心写入headers中,结果一直是乱码，耗时较长。以下是我加入responseType : "blob"的地方，根据自己项目封装的请求方法加入即可。

点击下载按钮时加入以下代码

//按钮
<el-button type="primary" @click="downLoadInventory">下载</el-button>

//下载方法
downLoadInventory(){
	this.$http.inventoryTask.exportByTask(param).then((res) => {   //调接口传参

		//下载zip
		//  参数1：接口返回数据；参数2：blob文件类型；参数3：文件名称
        downLoadFile(res,'application/zip',"文件名" + '.zip');  //downLoadFile方法在下面

		//下载excel
        //downLoadFile(res,'application/vnd.ms-excel',"文件名");
    }
}

//downLoadFile()
downLoadFile(data,type,fileName) {
    const element= document.createElement('element');
    const blob = new Blob([data], {
        type: type
    })
    element.style.display = 'none';
    element.href = window.URL.createObjectURL(blob);  //可以打印看看blob
    element.download = fileName; //下载的文件名
    document.body.appendChild(element);
    element.click();
    window.URL.revokeObjectURL(element);  //释放
}