web-dev-qa-db-ja.com

http postリクエストからファイルをダウンロード-Angular 6

res.json（data）の代わりにres.send（data）を使用して更新

Angular 6とNodeJSを使用しています。Webアプリケーションを実行しています。HTTPポストリクエストからファイルをダウンロードしようとしています。

このようにサーバーにリクエストを送信します。コンポーネントから、サービスの関数を呼び出します。コンポーネントでは、サーバーの回答があると考え、回答がある場合は応答で新しいBlobを作成し、FileSaverを使用してpdfをダウンロードします。

サーバーから応答を受け取ると、クライアントはエラーのように見えますが、ステータスは200です。エラーメッセージは次のとおりです。 " http：// localhost：3000/api/experiment/regression "以下のスクリーンショットを参照してください。

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

次に、サーバーから、送信されたデータを使用してコードを実行し、PDFファイルを生成します。次に、pdfをクライアントへの応答として送信します。

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

クライアントでは、答えがあります。コンソールログは次のとおりです。 console log

javascriptnode.jsangulartypescriptmean-stack
5
PierBJX

最後に、ビデオチュートリアルを見つけましたが、非常に基本的なものでした。

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

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