angular - 如何从 API 响应接收类型为 csv 的文件

Question

我有导出按钮，它点击 API 并以 .csv 类型发送响应。当我点击 API 时，响应说 status: 200但我得到 HttpErrorResponse在控制台中，并收到此错误

SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad

我试图问我的 friend 我必须改变我的标题，但我不明白如何正确地做到这一点。我应该在 Token Interceptor 中设置 header ，就像我设置 header 的 token 一样(如果是，我该怎么做？)？或者我该如何解决我的问题？

这是按钮触发的功能:

onExport = () => {
    this._service.getDataExport(1, 1, this.filter).subscribe(
      res => {
        console.log(res);
        // const filename = `MediaPreparation.csv`;
        // const blob = new Blob([res.data], { type: 'text/csv' });
        // saveAs(blob, filename);
      },
      err => console.log(err)
    );
  }

这是我点击的服务:

getDataExport = (page = 1, perPage = 1, filter = null): Observable<any> => {
   const _url = `${this.base_url}/api/v1/media-preparation/export`;

   return this.http.post(_url, {
     page : page.toString(),
     perPage: perPage.toString(),
     filter : filter
   });
}

这是 token 拦截器:

import { AuthService } from './auth.service';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {

  constructor(private injector: Injector) { }

  intercept(req, next) {
    const authService = this.injector.get(AuthService);
    const tokenizedReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${authService.getToken()}`
      }
    });

    return next.handle(tokenizedReq);
  }
}

感谢您的帮助，对于错误的解释，我很抱歉，我仍然是 Angular 的初学者。

Answer 1

原因很简单，HttpClient正在尝试将您的响应解析为 JSON，因为这是最常见的场景和默认操作。

防止HttpClient要解析您的回复，您必须输入 responseType: 'text'在您的 httpOptions 中:

private httpOptions = {
  headers: new HttpHeaders({}),
  responseType: 'text'
};

然后将此对象用作 http 方法的最后一个参数(我想是 get):

this.http.get(url, httpOptions)
  .subscribe(res => {
    // res is just a string, you have to split it on new lines and commas
    // or you can use a third part library
  });

备注 :

有些服务器可能需要添加一些不标准的 Accept标题，例如:

headers: new HttpHeader({
  Accept: 'text/csv'
});

或者

headers: new HttpHeader({
  Accept: 'application/csv'
});

或(标准但非语义):

headers: new HttpHeader({
  Accept: 'plain/text'
});