导出文件流,当responseType:"blob"时,取不到报

2022-07-29  本文已影响0人  轻丨尘
导出文件流报blob错.png

下面以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);
        //然后弹出下载成功信息
    }
}

上一篇 下一篇

猜你喜欢

热点阅读