web-dev-qa-db-fra.com

Télécharger le fichier à partir de la demande de publication http - Angular 6

MISE À JOUR avec res.send (data) au lieu de res.json (data)

En utilisant Angular 6 et NodeJS, je fais une application Web. J'essaie de télécharger un fichier à partir d'une demande de publication http.

J'envoie une demande au serveur comme ça. Depuis mon composant j'appelle une fonction dans un service. Dans le composant, je m'inscris pour avoir la réponse du serveur et quand je l'ai je crée un nouveau Blob avec la réponse et j'utilise FileSaver pour télécharger le pdf.

Maintenant, lorsque j'ai reçu la réponse du serveur, le client la voit comme une erreur alors que l'état est 200. Le message d'erreur est: "Échec Http lors de l'analyse de http: // localhost: 3000/api/experiment/regression " Voir la capture d'écran ci-dessous.

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

Puis à partir du serveur, il exécute du code avec les données envoyées et génère un fichier PDF. Ensuite, je voudrais envoyer le pdf en réponse au client. J'ai essayé comme ceci:

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

Chez le client, j'ai la réponse. Le journal de la console est: console log

javascriptnode.jsangulartypescriptmean-stack
6
PierBJX

Enfin, j'ai trouvé un tutoriel vidéo et c'était très basique.

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

Composant angulaire:

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

Service angulaire:

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