Javascript 从http post请求下载文件-Angular 6

更新为res.send（数据）而不是res.json（数据）

使用Angular 6和NodeJS，我正在做一个web应用程序。 我正在尝试从http post请求下载文件

我像这样向服务器发送请求。从我的组件调用服务中的函数。在组件中，我订阅服务器的答案，当我得到答案时，我用响应创建一个新的Blob，并使用FileSaver下载pdf

现在，当我从服务器收到答案时，客户端将其视为错误，而状态为200。错误消息是： “在分析的过程中Http失败” 请参见下面的屏幕截图

组件。ts

this.api.postML(this.regression).subscribe(
    res => {
      console.log(res);
      let pdf = new Blob(res.data, { type: "application/pdf" });
      let filename = "test.pdf";
      FileSaver.saveAs(pdf, filename);
    },
    err => {
      alert("Error to perform the regression");
      console.log(err);
    }
  );

  public postML(data): Observable<any> {
    // Create url
    let url = `${baseUrl}${"experiment/regression"}`;

    let options = {
      headers: { "Content-Type": "application/json", Accept: "application/pdf" }
    };
    // Call the http POST
    return this.http
      .post(url, data, options)
      .pipe(catchError(this.handleError));
  }

API.Service.ts

this.api.postML(this.regression).subscribe(
    res => {
      console.log(res);
      let pdf = new Blob(res.data, { type: "application/pdf" });
      let filename = "test.pdf";
      FileSaver.saveAs(pdf, filename);
    },
    err => {
      alert("Error to perform the regression");
      console.log(err);
    }
  );

  public postML(data): Observable<any> {
    // Create url
    let url = `${baseUrl}${"experiment/regression"}`;

    let options = {
      headers: { "Content-Type": "application/json", Accept: "application/pdf" }
    };
    // Call the http POST
    return this.http
      .post(url, data, options)
      .pipe(catchError(this.handleError));
  }

在客户端，我有答案。控制台日志为：

---

最后，我找到了一个视频教程，它非常基础

Node.js服务器：

const express = require("express");
const router = express.Router();

router.post("/experiment/resultML/downloadReport",downloadReport);

const downloadReport = function(req, res) {
  res.sendFile(req.body.filename);
};

import { saveAs } from "file-saver";
...

download() {
  let filename = "/Path/to/your/report.pdf";
  this.api.downloadReport(filename).subscribe(
    data => {
      saveAs(data, filename);
    },
    err => {
      alert("Problem while downloading the file.");
      console.error(err);
    }
  );
}

public downloadReport(file): Observable<any> {
  // Create url
  let url = `${baseUrl}${"/experiment/resultML/downloadReport"}`;
  var body = { filename: file };

  return this.http.post(url, body, {
    responseType: "blob",
    headers: new HttpHeaders().append("Content-Type", "application/json")
  });
}

角度分量：

const express = require("express");
const router = express.Router();

router.post("/experiment/resultML/downloadReport",downloadReport);

const downloadReport = function(req, res) {
  res.sendFile(req.body.filename);
};

import { saveAs } from "file-saver";
...

download() {
  let filename = "/Path/to/your/report.pdf";
  this.api.downloadReport(filename).subscribe(
    data => {
      saveAs(data, filename);
    },
    err => {
      alert("Problem while downloading the file.");
      console.error(err);
    }
  );
}

public downloadReport(file): Observable<any> {
  // Create url
  let url = `${baseUrl}${"/experiment/resultML/downloadReport"}`;
  var body = { filename: file };

  return this.http.post(url, body, {
    responseType: "blob",
    headers: new HttpHeaders().append("Content-Type", "application/json")
  });
}

角度服务：

const express = require("express");
const router = express.Router();

router.post("/experiment/resultML/downloadReport",downloadReport);

const downloadReport = function(req, res) {
  res.sendFile(req.body.filename);
};

import { saveAs } from "file-saver";
...

download() {
  let filename = "/Path/to/your/report.pdf";
  this.api.downloadReport(filename).subscribe(
    data => {
      saveAs(data, filename);
    },
    err => {
      alert("Problem while downloading the file.");
      console.error(err);
    }
  );
}

public downloadReport(file): Observable<any> {
  // Create url
  let url = `${baseUrl}${"/experiment/resultML/downloadReport"}`;
  var body = { filename: file };

  return this.http.post(url, body, {
    responseType: "blob",
    headers: new HttpHeaders().append("Content-Type", "application/json")
  });
}

公共下载报告（文件）：可观察{
//创建url
让url=`${baseUrl}${“/experience/resultML/downloadReport”}`；
var body={filename:file}；
返回此.http.post（url、正文、{
响应类型：“blob”，
headers:new-HttpHeaders（）.append（“内容类型”、“应用程序/json”）
});
}

这行看起来不太好

res.json（数据）为什么是JSON？它应该是一个字节流，对吗？你应该是正确的@rodrigoap。json将以json格式下载对象，而不是PDF格式。try
res.send（data）
查看我尝试过的res.send（data），即使状态为200，也会出现错误。消息错误是：“hello@PierBJX解析过程中Http失败。您可以共享github repo吗？”。我正在尝试从本地文件夹下载pdf文件。如何在angular 2+中实现这一点，上面的代码解释了如何实现。你还需要什么？你遗漏了什么？这就是我的问题。。请查看我下面的帖子，
saveAs
函数来自哪里？@FabioG它来自文件保护程序npm:import{saveAs}来自“文件保护程序”；