使用 Angular、ExpressJS、NodeJS 下载带有按钮的文本文档

Question

我正在尝试创建一个下载按钮，使用户能够从我的 node.js 服务器下载文档。

这是精美的按钮：

我使用 Angular 作为前端框架，使用 node.js 和 express.js 作为后端。

这是我希望用户能够下载的文档：

所以对于后端我写了这段代码：

server.js

const bodyParser = require('body-parser');
const cors = require('cors')
const express = require('express');
const app = express();
const router = express.Router();
const path = require('path');

app.use(cors());
app.use(bodyParser.json());


router.route('/generateReportByGet').get((req, res) => {
        res.download(path.join(__dirname, 'docs/doc1.txt'), function (err) {
            if (err) {
                console.log(err);
              } else {
                console.log('%c%s', 'color: #f2ceb6', 'NO ERROR');
                console.log('%c%s', 'color: #00a3cc', res);
              }
        });
});

app.use('/', router);
app.listen(5353, () => console.log('Express server running on port 5353'));

运行 server.js 文件后，输入：

localhost:5353/generateReportByGet

文件被下载：

所以这是我的逻辑告诉我的：

使用 Angular 创建一个按钮，向该按钮发送 GET 请求 地址和我应该得​​到相同的结果：文件被下载。

所以我的第一个问题是：我的逻辑有缺陷吗？

前端代码如下：

app.component.html：

<button  color="primary" (click)="generateReportbyGet()">Generate report By Get</button>
<router-outlet></router-outlet>

app.component.ts：

import { Component } from "@angular/core";
import { GenerateReportService } from "./services/generate-report.service";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private generateReportService: GenerateReportService) {}
  generateReportbyGet() {
    this.generateReportService.generateReportbyGet().subscribe((results) => {
      console.log("generateReportbyGet ...");
      console.log('%c%s', 'color: #aa00ff', results);
  }
}

generate-report.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class GenerateReportService {
  uri = 'http://localhost:5353';
  constructor(private http: HttpClient) {}
  generateReportbyGet() {
    return this.http.get(`${this.uri}/generateReportByGet`, {responseType: 'text'});
  }
}

我认为这应该像我描述的那样工作。但是，当我单击该按钮时，什么也没有发生。
但是，在浏览器控制台上，我可以从文件中检索文本：

这是我的第二个问题：
2/ 为什么点击按钮后文件下载过程没有启动？是代码有问题还是GET请求逻辑有问题？
谢谢！！

Answer 1

无法通过 ajax 调用下载文件。 在您的组件服务中更改以下代码。

generateReportbyGet() {
 var link=document.createElement('a');
    link.href=`${this.uri}/generateReportByGet`;
    link.download="MyDoc.txt";
    link.click();
}

Answer 2

在您的 Node JS 服务器端代码中...您正在读取文件的内容并发送它们...

(1) 返回一个文件，你可以这样做：

app.get('/generateReportByGet', function (req, res) { res.sendFile(__dirname + "/" + "docs/doc1.txt"); })

(2) 或者您可以执行 (as per this)：

app.get('/generateReportByGet', function(req, res){
  const file = `${__dirname}/docs/doc1.txt`;
  res.download(file); 
});