Angular 6 - 从 httpClient 获取 csv 响应

Posted 2023-03-07

【中文标题】Angular 6 - 从 httpClient 获取 csv 响应

【英文标题】：Angular 6 - get csv response from httpClient

【发布时间】：2019-08-08 19:23:21

【问题描述】：

任何人都可以举一个从 Angular 6 httpClient 获取应用程序/八位字节流响应的示例。我正在使用下面的代码，但它不起作用（我收到未知错误 - 401 响应） -

import  saveAs  from 'file-saver';

getJobOutput() 
    this.workflowService.fetchOutput(this.jobId,this.outputId).subscribe((response : any) =>  // download file
              var blob = new Blob([response.blob()], type: 'application/octet-stream');
    var filename = 'file.csv';
    saveAs(blob, filename);
    );
   

服务如下 -

 fetchOutput(jobId : string, outputId) 
    var jobOutputURL = "myEnpoint";
     var params = this.createHttpAuthorization(jobOutputURL,"GET");
     params["format"] = "csv";
    const options = 
            headers: new HttpHeaders(  'Content-Type': 'application/octet-stream',
                                        'Accept' : 'application/octet-stream',
                                        'Access-Control-Allow-Origin' : '*'
                                    );

    var endpoint = `$jobOutputURL?oauth_consumer_key=$params["oauth_consumer_key"]&oauth_signature_method=$params["oauth_signature_method"]&oauth_nonce=$params["oauth_nonce"]&oauth_timestamp=$params["oauth_timestamp"]&oauth_version=1.0&format=$params["format"]&oauth_signature=$params["oauth_signature"]`;
return this.httpClient.get(endpoint, ...options, responseType: 'blob');
  

【问题讨论】：

您的请求看起来不错，如果您收到401，则您无权下载.csv。检查您的 API，是否允许您访问。

401 错误表示“未经授权”。您确定您已授权该请求吗？

是的。在 jquery 中询问时相同的请求工作正常。

这个请求有效 - this.getOutputFileURL = function(jobId, outputId, format) var type = "GET", url = this.apiLocation + "/jobs/" + jobId + "/output/ " + outputId + "/", 参数 = buildOauthParams(this.apiKey); $.extend(params, format: format || "Raw"); var signature = generateSignature(type, url, params, this.apiSecret); $.extend(params, oauth_signature: 签名); window.location.assign(url + "?" + $.param(params)); ;

【参考方案1】：

要获取应用程序/八位字节流，您必须将 arraybuffer 设置为 Angular HttpHeaders 中的响应类型。

这是服务方法：

fetchOutput(): Observable<ArrayBuffer> 
    let headers = new HttpHeaders();

    const options: 
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
     = 
        responseType: 'arraybuffer'
    ;

    return this.httpClient
        .get('https://your-service-url.com/api/v1/your-resource', options)
        .pipe(
            map((file: ArrayBuffer) => 
                return file;
            )
        );

这是对服务方法和saveAs函数的调用：

this.yourService
    .fetchOutput()
    .subscribe((data: any) => 
        const blob = new Blob([data],  type: 'application/octet-stream' );
        const fileName = 'Your File Name.csv';
        saveAs(blob, fileName);
    )

正如其他用户的建议：401 Unauthorized 通常是由于缺少凭据而导致的客户端错误。

【讨论】：

您好 Julien，感谢您提供上面的代码。我仍然是一个带有 401（未经授权）错误的 GET 请求。但是，当我粘贴到邮递员上时，相同的 URL 给了我正确的响应。我怀疑这是授权问题，因为我能够访问托管在同一服务器上的其他类型的 API。

你是用windows认证，还是用什么授权？ postman 等工具可以隐式设置授权，而 Angular 则不能。

我正在使用 oauth 1.0 并设置这些参数 - oauth_consumer_key, oauth_signature_method: HMAC-SHA1 oauth_nonce, oauth_timestamp, oauth_version: 1.0 此外，其他 GET 请求使用这些 oauth 1.0 参数（通过我的 Angular 6 应用程序） . oauth_signature: VTat UuyYG5bWrpSZ18lJfFeUjQ=

尝试以下操作之一：将 Angular 通过 chrome 开发人员网络选项卡生成的 URL 与邮递员创建的 URL 进行比较。仔细检查 Angular 设置的标题，并将它们与邮递员创建的进行比较。尝试在您的后端调试授权方法，以检查您在 Angular 中定义的参数是否正确到达您的端点。

@Aetherix 是的，在上述情况下，map 运算符不是必需的，尽管我添加它是为了表明您可以更改 observable 的输出