Question

我已窃取NodeJS尝试从服务器下载文件。

router.post("/download", function(req, res, next) {
  console.log(req);
  filepath = path.join(__dirname, "/files") + "/" + req.body.filename;
  console.log(filepath);
  res.sendFile(filepath);
});

这是我的Angular 2代码： Component.ts

  download(index) {
    var filename = this.attachmentList[index].uploadname;
    this._uploadService
      .downloadFile(filename)
      .subscribe(data => saveAs(data, filename), error => console.log(error));
  }

Service.ts

export class UploadService {
  constructor(private http: HttpClient, private loginService: LoginService) {}
  httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
      responseType: "blob"
    })
  };

  downloadFile(file: string): Observable<Blob> {
    var body = { filename: file };
    console.log(body);
    return this.http.post<Blob>(
      "http://localhost:8080/download",
      body,
      this.httpOptions
    );
  }

在我的HTML响应中，我将文件正确记录到浏览器的网络检查工具中。但是Angular试图将响应解析为一个JSON对象，由于响应是blob，因此显然不起作用。

我得到的错误是：

JSON中意外的令牌％在JSON.parse（）的位置0 在XMLHttpRequest.onLoad角度2处

有人对此有解决方案吗？

谢谢！

Answer 1

尝试以下http选项：

{
    responseType: 'blob',
    observe:'response'
}

然后您将收到类型为HttpResponse<Blob>的响应，因此在服务中执行data.body将为您提供可传递给saveAs的Blob。

您可以在此处找到有关观察的更多信息：

https://angular.io/guide/http#reading-the-full-response

Answer 2

我解决了这个问题，在服务代码中，我在帖子后删除了，因为这迫使我的返回返回一个二进制文件，而不是JSON。现在的代码是这样的：

  downloadFile(file: string): Observable<Blob> {
    var body = { filename: file };
    console.log(body);
    return this.http.post<Blob>(
      "http://localhost:8080/download",
      body,
      this.httpOptions
    );
  }

谢谢大家。

Angular 2从Node.js保存文件

2 个答案: