文件下载（获取响应头里的数据 Content-Disposition ）

• 如果前端想要获取到响应头response中获取自定义headers需要后端设置一下 Access-Control-Expose-Headers : '自定义属性名'

//这里  我需要获取response里headers的Content-Disposition  所以后端需要设置如下：
response.setHeader( "Access-Control-Expose-Headers ", "Content-Disposition" );

image.png

• 前端下载接口 需要添加 responseType:'blob'

//request 是axios封装好的
...
 export function download(id:number) {
  return request({
    url: '/omc-server/data/backupDataRecord/download/'+id,
    responseType:'blob',
    method: 'get'
  })
}

• 调接口

const onDownloadHandle = (node: BackupRecoveryRecord) => {
  systemBackupDownload(node.id).then(response => {
    let fileName = ''
    let temp = response.headers['content-disposition']
    let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    let matches = filenameRegex.exec(temp);
    if (matches != null && matches[1]) {
      fileName = matches[1].replace(/['"]/g, ''); //  解析出文件名 Backup-20230307152152.tgz
    }
    //调用成功，在html中创建一个a元素
    let aTag = document.createElement('a');
    //创建一个blob对象
    let blob: any = new Blob([response.data]);
    aTag.download = fileName + '.tgz'; // 下载的文件名
    aTag.href = URL.createObjectURL(blob);   //创建一个URL对象
    aTag.click();
    URL.revokeObjectURL(blob);          //释放URL对象
    
  }).catch(err => console.log(err))
}

• 下载成功

image.png