Html 角度6-从httpClient获取csv响应

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

服务详情如下：

 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'});
  }

---

要获取应用程序/八位字节流，必须将

arraybuffer

设置为角度

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;
            })
        );
}

---

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

如果您获得的是

401

文件，您的请求看起来很好，但您无权下载

.csv

。检查API，是否允许访问。401错误表示“未经授权”。你确定你授权了这个请求吗？是的。当在jquery中被询问时，同样的请求也可以正常工作。这个请求可以工作-This.getOutputFileURL=function（jobId，outputId，format）{var type=“GET”，url=This.apiLocation+”/jobs/“+jobId+”/output/“+outputId+”，params=buildOauthParams（This.apiKey）；$.extend（params，{format:format | | |“Raw”}）；var signature=generateSignature（type，url，params，this.apiSecret）；$.extend（params，{oauth_signature:signature}）；window.location.assign（url+“？”+$.param（params））；}；嗨，朱利安，谢谢你上面的代码。我仍然收到一个带有401（未经授权）错误的GET请求。然而，当我粘贴到postman上时，相同的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 uuuyyg5bwrpsz18ljffeujq=尝试以下操作之一：将Angular通过chrome开发者网络选项卡生成的url与postman创建的url进行比较。仔细检查邮件头，并将其与邮递员创建的邮件头进行比较。尝试在后端调试授权方法，以检查您在Angular中定义的参数是否正确到达端点。谢谢Julien。因为，我还有另一个应用程序在Jquery中成功运行，所以我看到了两个不同之处——在Jquery中，请求头中的Host in request header为“server domain”，而我的angular应用程序的origin in request header为“”。你知道这会有什么不同吗？

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;
            })
        );
}

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