导出文件流报blob错.png

• 导出文件流时，请求需要设置为responseType:"blob"，打印的http错误信息也会是blob类型。但是，如果是下载报错的情况下，由于指定了响应类型是blob，服务端返回了错误信息，从http错误中却不能直接看出来。
• 如果不设置responseType为blob，服务端返回的文件流无法下载（也许有方式，没研究）。
• 目前看到的所有文章，关于响应类型设置为blob时，报错处理全都不对。下面根据实践简单介绍一下怎么取blob中的服务端返回值。
• 无论是原生js，ajax还是angular或者vue，下面方式应该都是通用的。

下面以angular9下载文件请求为例：

import { HttpClient, HttpErrorResponse, HttpParams, HttpHeaders } from '@angular/common/http';
constructor(private http: HttpClient) { }
postUrl="xxxxx";
downloadFile(params){
    // 请求地址，请求参数，请求配置信息，subscribe成功信息，error错误信息
    this.http.post(this.postUrl, params, {
        headers: new HttpHeaders().set('Accept', 'application/octet-stream'),
        observe: 'response',
        responseType: 'blob'
    }).subscribe((blob) => {
        //请求成功去下载文件
        this.processData(blob);
        // 继续其他处理，如关闭loading
    }, (error: HttpErrorResponse) => {
        //下载失败处理
        console.log(error)
        var blob = error.error;
        if (blob.type.indexOf("application/json")>-1) {
            //方式一：使用Blob.text()，参考https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/text
            blob.text().then(text => {
                if (typeof (text) == 'string') {
                    //服务端响应信息就在 errInfo
                    let errInfo = JSON.parse(text);
                    //然后弹出报错信息  
                }
            });
            //方式二：使用fileReader
            //var reader=new FileReader();
            //reader.readAsText(blob)
            //reader.onload = function() {
                  //if (typeof (reader.result) == 'string') {
                    // var errInfo = JSON.parse(text); 
                    // //弹出报错信息
                  //}
                //}
        };
        // 继续其他处理，如关闭loading
    });
}

processData(res: any) {
    let blob = new Blob([res.body], { type: "application/octet-stream" }); //此处有坑，不同的ng版本或者其他框架，不一定都是取res.body
    //从header中读取文件名称
    let contentDisposition = res.headers.get('content-disposition');
    let fileName = contentDisposition.split('=')[1].replace(/(^\s*)|(\s*$)/g, "");
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        setTimeout(() => document.body.removeChild(a), 1000);
        window.URL.revokeObjectURL(url);
        //然后弹出下载成功信息
    }
}