• 如果前端想要獲取到響應(yīng)頭response中獲取自定義headers需要后端設(shè)置一下 Access-Control-Expose-Headers : '自定義屬性名'

//這里  我需要獲取response里headers的Content-Disposition  所以后端需要設(shè)置如下：
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'
  })
}

• 調(diào)接口

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
    }
    //調(diào)用成功，在html中創(chuàng)建一個a元素
    let aTag = document.createElement('a');
    //創(chuàng)建一個blob對象
    let blob: any = new Blob([response.data]);
    aTag.download = fileName + '.tgz'; // 下載的文件名
    aTag.href = URL.createObjectURL(blob);   //創(chuàng)建一個URL對象
    aTag.click();
    URL.revokeObjectURL(blob);          //釋放URL對象
    
  }).catch(err => console.log(err))
}

• 下載成功

image.png