在angular中下载文件前端如何获取文件流中文件名称

引言: 后端大大比较忙 想让我这个小前端实现获取文件的文件名 脑壳疼

原来service的写法

public downloadApproveAccessory(id: number): Observable<ArrayBuffer> {
    return this._http.get(`/api/approve/downloadZip?id=${id}`, {responseType: 'arraybuffer'});
}

修改后service的写法

public downloadApproveAccessory(id: number): Observable<HttpResponse<ArrayBuffer>> {
    return this._http.get(`/api/approve/downloadZip?id=${id}`, {observe: 'response',responseType: 'arraybuffer'});
}

在ts中的调用 获取http请求Response Headers中的content-disposition 这里filename对应的就是文件名和其后缀 这里有可能是中文的需要转义

this._appDataSer.downloadApproveAccessory(id)
    .subscribe((res) => {
        console.log(res, res.headers.get('content-disposition'));
        const disposition = res.headers.get('content-disposition');
        const fileNameStr = disposition.split(';')[1]
          .trim()
          .slice(10);
        // 如果需要转义 这里fileName可以修改为如下
        const fileNameStr = decodeURIComponent(disposition).split(';')[1]
          .trim()
          .slice(10);
        const lastIndexCursor = fileNameStr.lastIndexOf('.');
        const fileName = fileNameStr
          .slice(0, lastIndexCursor); // 文件名
        const typeName = fileNameStr
          .slice(lastIndexCursor + 1); // 拓展名
        console.log(disposition, fileNameStr, fileName, typeName);
    });

打印结果如下 这里C34就是文件名

attachment; filename="C34.xlsx" C34.xlsx" C34 xlsx