Download file from http post request - Angular 6

Question

UPDATED with res.send(data) instead of res.json(data)

Using Angular 6 and NodeJS I am doing a web application. I am trying to download a file from a http post request.

I send a request to the server like this. From my component I call a function in a service. In the component, I susbscribe to have the answer of the server and when I have it I create a new Blob with the response and I Use FileSaver to download the pdf.

Now, when I received the answer from the server, the client sees it like an error whereas the status is 200. The error message is: "Http failure during parsing for http://localhost:3000/api/experiment/regression" See the screenshot below.

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

API.Service.ts

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

Then from the server, it executes some code with the data sent and generates a PDF file. Then, I would like to send the pdf as a response to the client. I tried like this:

fs.readFile("/home/user/test.pdf", function(err, data) {
  let pdfName = "Report.pdf";
  res.contentType("application/pdf");
  res.set("Content-Disposition", pdfName);
  res.set("Content-Transfer-Encoding", "binary");
  console.log(data);
  console.log("Send data");
  res.status(200);
  res.send(data);
});

In the client, I have the answer. The console log is:

This line doesn't look good res.json(data); Why JSON? it should be a byte stream, right? — rodrigoap
– rodrigoap, Commented Aug 10, 2018 at 15:42
You would be correct @rodrigoap. A json will download the object in a json format, not a PDF. — Maartenw
– Maartenw, Commented Aug 10, 2018 at 15:46
I tried res.send(data) and I have an error even if the status is 200. The message error is: "Http failure during parsing for localhost:3000/api/experiment/regression" — PierBJX
– PierBJX, Commented Aug 10, 2018 at 17:06

Marcos Dimitrio · Accepted Answer · 2019-08-15 19:53:08Z

31

Finally, I found a video tutorial and it was very basic.

Node.js Server:

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

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

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

Angular Component:

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

Angular Service:

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

edited Aug 15, 2019 at 19:53

Marcos Dimitrio

6,9306 gold badges42 silver badges64 bronze badges

answered Aug 14, 2018 at 14:25

PierBJX

2,4125 gold badges26 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr. Learner Over a year ago

hello @PierBJX could you pls share github repo. am trying to download pdf file from my local folder. how to achieve this in angular 2+ ,nodeJS Expressjs

PierBJX Over a year ago

The code above explains how to do it. What else do you need ? Which points are you missing ?

Mr. Learner Over a year ago

This is what my issues.. Pls check my below post stackoverflow.com/q/52968015/9552112

FabioG Over a year ago

where does that saveAs function come from?

PierBJX Over a year ago

@FabioG It comes from file-saver npm: import { saveAs } from "file-saver";

|

Collectives™ on Stack Overflow

Download file from http post request - Angular 6

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related