使用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

在您的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); 
});

Answer 2

无法下载文件以进行Ajax调用。 在您的组件服务中，更改以下代码。

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