数据流下载

维～易

已于 2023-02-21 15:14:07 修改

阅读量126

点赞数

文章标签：前端 javascript html

于 2023-02-07 13:56:29 首次发布

本文链接：https://blog.csdn.net/weixin_44981586/article/details/128917460

版权

该代码段展示了如何在JavaScript中处理接口返回的Blob数据，创建一个可下载的文件。首先检查数据存在，然后创建Blob对象，从响应头获取文件名，利用a标签模拟点击下载，并在完成后释放URL对象。

摘要由CSDN通过智能技术生成

下载

//没数据直接返回
	if (!res.data) {
        return;
      }
      //创建blob文件 （请求接口里要加 responseType: 'blob', 返回格式是数据流）
      //第一个参数是数据， 第二个参数是格式 因为我这边是打包下载所以必须得写
      const blob = new Blob([res.data], { type: 'application/zip' });
      //名称可以在请求头里面截取
      const fileName = decodeURIComponent(
          res.headers['content-disposition'].split(';')[1].split('=')[1]
      );
      const _fileName = fileName;
      if ('download' in document.createElement('a')) {
      	//创建一个a连接
         const elink = document.createElement('a');
         elink.download = _fileName;
         elink.style.display = 'none';
         elink.href = URL.createObjectURL(blob);
         document.body.appendChild(elink);
         elink.click();
         URL.revokeObjectURL(elink.href); // 释放URL 对象
         document.body.removeChild(elink);
      }