Umi/React：将后端返回的二进制文件流，在前端输出为文件，直接下载

￡神魔★判官ぃ 2024-03-30 17:57 66阅读 0赞

后端返回如下的数据  
![在这里插入图片描述][0ebeef1879ca4c0ea86a3a4a5a30c93b.png]  
接下来，我便要将这些二进制数据转换为对应的文件，下面的`res参数便是上面的二进制内容`

## 转换为Excel ##

downloadData = (res: any) =>{
        
       const  blob = new Blob([res], {
        
         type: 'application/vnd.ms-excel;charset=utf-8'
       })
    
       const link = document.createElement('a');
       // 下载后的文件名
       link.download = "xxx.xlsx";
    
       link.href = URL.createObjectURL(blob);
       document.body.appendChild(link)
       link.click();
       //释放URL对象
       URL.revokeObjectURL(link.href);
       document.body.removeChild(link);
       message.success("成功")
    
     }

## 转换为pdf ##

与上面的区别在下面两个地方

const  blob = new Blob([res], {
        
      type: 'application/vnd.ms-excel;charset=utf-8'
    })
    // 下载后的文件名
    link.download = "xxx.PDF";

## 所有格式 ##

还是这两个地方的区别

const  blob = new Blob([res], {
        
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    })
    // 下载后的文件名
    link.download = "xxx.xx";

[0ebeef1879ca4c0ea86a3a4a5a30c93b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4a7e8018e13b43dea527dba7d5258154.png