美文网首页
angular5+==>post下载文件

angular5+==>post下载文件

作者: 小米和豆豆 | 来源:发表于2020-12-27 19:34 被阅读0次
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    ......
    
     downLoadFile(url: any, data: any, fileName: any) {
        return new Promise((resolve,reject) => {
          this.httpClient.post(url, data, {
            headers: new HttpHeaders().set('Authorization', ''),
            responseType: 'blob',
            observe: 'response'
          }).subscribe(res => {
            // var resHeaders = res.headers.toJSON() || {};
            /**
             * 关于Blob 如何获取内容
             * https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
             * reader.result 包含转化为类型数组的blob
             */
            var reader: any = new FileReader();
            reader.readAsText(res.body, 'utf-8');
            // reader.readAsArrayBuffer(res.body);
            reader.addEventListener("loadend", () => {
              let toJson;
    
              try {
                /**
                 * 尝试将接口返回的数据转换成json格式
                 * 接口正常情况下返回的数据流的形式,转成json数据肯定会报错。
                 * catch捕获后执行文件下载。
                 *
                 * 假如能够顺利转成json,说明接口是报错状态,返回的是错误数据
                 */
                toJson = JSON.parse(reader.result)
    
              } catch (error) {
                /*
                 * 获取reseponse headers中的 文件名
                 */
                let disposition = res.headers.get('content-disposition');
                let newfileName = '';
                if (disposition) {
                  newfileName = decodeURI(disposition.split('=')[1]);
                  fileName = newfileName;
                }
                resolve('success');
                this.downFile(res.body, fileName);
                return null;
              }
              //报错
              reject({
                status: 400,
                error_msg: toJson.msg || toJson.message || '下载错误'
              });
            });
          },err=> {
              reject({
                status: err.status,
                error_msg: err.message
              });
          })
        });
      }
      downFile(blob, fileName) {
        if (fileName === "test") {};
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        }
      }
    

    相关文章

      网友评论

          本文标题:angular5+==>post下载文件

          本文链接:https://www.haomeiwen.com/subject/xeptoktx.html