Angular - Создать файл на основе ввода формы и передать его пользователю - PullRequest
Новая
       9

Angular - Создать файл на основе ввода формы и передать его пользователю

0 голосов
/ 15 апреля 2020

Я хочу создать компонент, который обрабатывает пользовательский ввод из текстовой области и передает его пользователю в виде (txt) файла в Angular 9.

Форма в app.component. html выглядит следующим образом: 

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <textarea name="myText" ngModel></textarea>
  <input name="fileName" ngModel>
  <button type="submit">Download</button>
</form>

Мой app.component.ts выглядит следующим образом 

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myForm', {static: true}) myForm: NgForm;

  onSubmit(){
    // process this.myForm.value.myText
    // serve file with this.myForm.value.fileName and myTextProcessed
  }
}

Как мне создать файл с Angular на основе пользовательского ввода, введенного в форму и подать его пользователю?

1 Ответ

1 голос
/ 15 апреля 2020

Вам необходимо добавить следующую функцию в ваш файл ts и вызвать ее из отправки, она не будет запрашивать место для сохранения файла, так как по умолчанию файл будет сохранен в вашей папке загрузки 

download() {
    let file = new Blob([this.myForm.form.value.myText], {type: '.txt'});
    let a = document.createElement("a"),
            url = URL.createObjectURL(file);
    a.href = url;
    a.download = this.myForm.form.value.fileName;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);  
    }, 0); 
}

Пример Stackblitz: https://stackblitz.com/edit/angular-bpbexb

...