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

Posted 2023-03-07

【中文标题】从http post请求下载文件 - Angular 6

【英文标题】：Download file from http post request - Angular 6

【发布时间】：2019-01-18 06:25:50

【问题描述】：

更新为 res.send(data) 而不是 res.json(data)

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

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

现在，当我从服务器收到答案时，客户端将其视为错误，而状态为 200。错误消息是： “http://localhost:3000/api/experiment/regression 解析期间 Http 失败” 请参阅下面的屏幕截图。

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

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

【问题讨论】：

这条线看起来不太好res.json(data); 为什么是 JSON？应该是字节流吧？

你是正确的@rodrigoap。 json 将以 json 格式下载对象，而不是 PDF。

试试res.send(data)

看看nodejs.org/api/…

我尝试了 res.send(data)，即使状态为 200 我也有错误。消息错误是：“localhost:3000/api/experiment/regression 解析期间的 Http 失败”

【参考方案1】：

终于找到了一个视频教程，很基础。

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

【讨论】：

你好@PierBJX你能分享github repo吗？我正在尝试从我的本地文件夹下载 pdf 文件。如何在 Angular 2+ 中实现这一点，nodeJS Expressjs

上面的代码解释了如何做。你还需要什么 ？你错过了哪些点？

这是我的问题.. 请检查我下面的帖子***.com/q/52968015/9552112

saveAs 函数从何而来？

@FabioG 来自文件保护程序 npm: import saveAs from "file-saver";