Использование 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 и ввода:

локальный: 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);
  }
}

порождающие-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 ) или вы можете сделать ( согласно этому ):

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