Stellen eine Datei zum Download in Angular bereit

  2. How-To's
  3. Angular Howtos
  4. Stellen eine Datei zum Download in …
Oluwafisayo Oluwatayo 15 Februar 2024
Angular Angular Download
  1. Eine .txt-Datei mit Angular zum Herunterladen bereitstellen
  2. Datei zum Download bereitstellen mit ngx-filesaver
  3. Stellen Sie eine .jpg-Datei zum Download mit Angular bereit
  4. Abschluss
Stellen eine Datei zum Download in Angular bereit

Ignorante Glückseligkeit ist, wenn Sie eine Datei herunterladen möchten, sich auf einer Website anmelden, nach der Datei suchen, sie finden, auf Download klicken und fertig sind, ohne die Aufgaben und den Aufwand zu kennen, die hinter der Bereitstellung dieser Dateien zum Download stehen Grundstück. Für Webentwickler kann das Bereitstellen einer Datei zum Herunterladen eine solche Aufgabe sein, dass Sie diese unschuldigen Benutzer beneiden werden.

Aber wie stellen wir Dateien mit dem Angular-Framework zum Download bereit? Betrachten wir einige Ansätze.

Eine .txt-Datei mit Angular zum Herunterladen bereitstellen

Der erste Ansatz ist hier, einen Text in ein .txt-Format umzuwandeln und zum Download bereitzustellen. Um Dateien zum Herunterladen bereitzustellen, müssen wir Blob verwenden, einen virtuellen Speicher zum direkten Bereitstellen von Dokumenten an einen Browser.

Als erstes müssen Sie ein neues Angular-Projekt starten. Dann geben wir in der Datei app.component.html diese Codes ein:

Code-Snippet – app.component.html:

<a [href]="fileUrl" download="file.txt">DownloadFile</a>

Dadurch entsteht die Webseitenstruktur und der Link, auf den zum Download geklickt wird.

Dann müssen wir Funktion und Verhalten für die App erstellen. Wir werden das in der Datei app.component.ts tun, wie unten:

Code-Snippet – app.component.ts:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'done';
  fileUrl;
  constructor(private sanitizer: DomSanitizer) {  }
  ngOnInit() {
    const data = 'some text';
    const blob = new Blob([data], { type: 'application/octet-stream' });
    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
  }
}

Wir beginnen damit, die Daten zu definieren, die wir speichern möchten; es ist ein Text, some text. Dann definieren wir die Funktion Blob und deklarieren die Daten, die wir innerhalb der Funktion speichern möchten.

Wir werden das Modul DomSanitizer verwenden, damit die Datei, die wir zum Download bereitstellen, den Sicherheitstest von Angular bestehen kann. Dann gehen wir zur Datei app.module.ts, um die Module zu importieren, die wir zum Erstellen der App verwendet haben.

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ausgang:

Angular txt-Datei zum Download

Datei zum Download bereitstellen mit ngx-filesaver

Schauen wir uns nun an, wie wir eine Datei mit der ngx-Abhängigkeit in Angular zum Download bereitstellen können. Der ngx-filesaver ist ein gesichertes und beliebtes Paket, das eine einfache Möglichkeit bietet, Dateien zum Download bereitzustellen.

Der ngx-filesaver kann durch Eingabe von npm i ngx-filesaver im Verzeichnis des neu erstellten Projektordners installiert werden.

Um fortzufahren, navigieren wir zur Datei app.component.html und schreiben diese Codes, um die Struktur für die Webanwendung zu erstellen.

Code-Snippet – app.component.html:

<h1></h1>
<textarea [(ngModel)]="text"></textarea>
<button type="button" (click)="onDown()">Save Text</button>

Hier haben wir eine Schaltfläche mit dem Ereignis-Listener onDown erstellt, sodass beim Klicken auf die Schaltfläche die von uns bereitgestellte Datei heruntergeladen wird.

Jetzt müssen wir die eigentliche Arbeit in der Datei app.component.ts erledigen, wie unten:

Code-Snippet – app.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FileSaverService } from 'ngx-filesaver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  title = 'loginfive';
  public text = 'hello';
  constructor(
    private _httpClient: HttpClient,
    private _FileSaverService: FileSaverService
  ) {}

  ngOnInit() {}

  onDown() {
    const fileName = `save.txt`;
    const fileType = this._FileSaverService.genType(fileName);
    const txtBlob = new Blob([this.text], { type: fileType });
    this._FileSaverService.save(txtBlob, fileName);
    }
}

Sie werden feststellen, dass wir in der Datei app.component.ts den Ereignis-Listener onDown innerhalb des Tags button angegeben haben. Hier haben wir die Funktionen dafür definiert.

Zuerst haben wir die Daten deklariert, die zum Download bereitgestellt werden; es ist eine Textdatei. Dann haben wir Blob verwendet, um die Datei zum Herunterladen im Browser bereitzustellen.

Der letzte Teil dieses Ansatzes besteht darin, die Module zu importieren, die wir zur Entwicklung der Web-App verwendet haben.

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { FileSaverModule } from 'ngx-filesaver';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule,
    FormsModule,
    HttpClientModule,
    FileSaverModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ausgang:

Angular-Datei zum Herunterladen mit ngx-filesaver

Stellen Sie eine .jpg-Datei zum Download mit Angular bereit

Bisher haben wir uns angesehen, wie man .txt-Dateien zum Download bereitstellen kann. Schauen wir uns nun an, wie wir ein Bild zum Download bereitstellen können.

Wir werden das Bild von einer URL abrufen, und der Download zeigt einen Fortschrittsbalken mit freundlicher Genehmigung von Angular Material.

Wir sollten zuerst ein neues Angular-Projekt erstellen und das Angular-Materialpaket installieren, zum Projektordner navigieren und Folgendes eingeben: ng add @*angular/material.

Nach erfolgreicher Installation wechseln wir zur Datei app.component.html, um die Seitenstruktur mit der Download-Fortschrittsfolie zu erstellen.

Code-Snippet – app.component.html:

<mat-card>
    <div class="file">
        <p>{{ slides.name }}</p>
        <button (click)="download(slides)" mat-raised-button color="primary">Download</button>
    </div>
    <mat-progress-bar *ngIf="download$ | async as download"
        [mode]="download.state == 'PENDING' ? 'buffer' : 'determinate'"
    [value]="download.progress">
    </mat-progress-bar>
</mat-card>

Wir müssen eine Komponente erstellen, in der wir an Codes arbeiten, um den Download-Fortschritt zu beobachten und die Materialfolie zu aktivieren. Wir erstellen eine Datei, nennen sie download.ts und arbeiten diese Codes darin ein.

Codeschnipsel- download.ts:

import {
    HttpEvent,
    HttpEventType,
    HttpProgressEvent,
    HttpResponse
  } from "@angular/common/http";
  import { Observable } from "rxjs";
  import { distinctUntilChanged, scan, map, tap } from "rxjs/operators";

  function isHttpResponse<T>(event: HttpEvent<T>): event is HttpResponse<T> {
    return event.type === HttpEventType.Response;
  }

  function isHttpProgressEvent(
    event: HttpEvent<unknown>
  ): event is HttpProgressEvent {
    return (
      event.type === HttpEventType.DownloadProgress ||
      event.type === HttpEventType.UploadProgress
    );
  }

  export interface Download {
    content: Blob | any;
    progress: number;
    state: "PENDING" | "IN_PROGRESS" | "DONE";
  }

  export function download(
    saver?: (b: Blob) => void
  ): (source: Observable<HttpEvent<Blob>>) => Observable<Download> {
    return (source: Observable<HttpEvent<Blob>>) =>
      source.pipe(
        scan(
          (download: Download, event): Download => {
            if (isHttpProgressEvent(event)) {
              return {
                progress: event.total
                  ? Math.round((100 * event.loaded) / event.total)
                  : download.progress,
                state: "IN_PROGRESS",
                content: null
              };
            }
            if (isHttpResponse(event)) {
              if (saver) {
                saver(event.body);
              }
              return {
                progress: 100,
                state: "DONE",
                content: event.body
              };
            }
            return download;
          },
          { state: "PENDING", progress: 0, content: null }
        ),
        distinctUntilChanged((a, b) => a.state === b.state
          && a.progress === b.progress
          && a.content === b.content
        )
      );
  }

Da wir den Download-Fortschritt der von uns zum Download bereitgestellten Datei beobachten müssen, verwenden wir die Funktion Observable, um den Download-Fortschritt zu überwachen und ihn dann in den Material-Slider zu übersetzen. Als Nächstes erstellen Sie eine Dienstdatei, die das Abrufen der Datei von der URL handhabt, und zeigen sie dann mit der Fortschrittsfolie an.

Lassen Sie uns eine Servicedatei erstellen, sie download.service.ts nennen und diese Codes eingeben:

Code-Snippet – download.service.ts:

import { Injectable, Inject } from '@angular/core'
import { HttpClient, HttpRequest } from '@angular/common/http'
import { download, Download } from './download'
import { map } from 'rxjs/operators'
import { Observable } from 'rxjs'
import { SAVER, Saver } from './saver.provider'

@Injectable({providedIn: 'root'})
export class DownloadService {

  constructor(
    private http: HttpClient,
    @Inject(SAVER) private save: Saver
  ) {
  }

  download(url: string, filename?: string): Observable<Download> {
    return this.http.get(url, {
      reportProgress: true,
      observe: 'events',
      responseType: 'blob'
    }).pipe(download(blob => this.save(blob, filename)))
  }

  blob(url: string, filename?: string): Observable<Blob> {
    return this.http.get(url, {
      responseType: 'blob'
    })
  }
}

Um diese Dienste für unsere Anwendung bereitzustellen, benötigen wir einen Anbieter, erstellen eine neue Datei, nennen sie saver.provider.ts und fügen die Codes darin ein.

Codeschnipsel – saver.provider.ts:

import {InjectionToken} from '@angular/core'
import { saveAs } from 'file-saver';

export type Saver = (blob: Blob, filename?: string) => void
export const SAVER = new InjectionToken<Saver>('saver')
export function getSaver(): Saver {
  return saveAs;
}

Als nächstes erhalten Sie die URL des Bildes, das wir zum Download bereitstellen möchten. Wir werden das in der Datei app.component.ts tun und diese Codes eingeben.

Code-Snippet – app.component.ts:

import { Component, Inject } from '@angular/core';
import { DownloadService } from './download.service'
import { Download } from './download'
import { Observable } from 'rxjs'
import { tap } from 'rxjs/operators'
import { DOCUMENT } from '@angular/common'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'done';
  slides =
    {name: 'Click here:', url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg'}
  download$: Observable<Download>

  constructor(private downloads: DownloadService,
              @Inject(DOCUMENT) private document: Document) {}

  download({name, url}: {name: string, url: string}) {
    this.download$ = this.downloads.download(url, name)
  }
}

Wir brauchen Tonnen von Modulen, um die App zum Laufen zu bringen. Wir müssen diese Module in die Datei app.module.ts importieren.

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'
import {MatButtonModule} from '@angular/material/button';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatCardModule} from '@angular/material/card';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { AppComponent } from './app.component';
import { SAVER, getSaver } from './saver.provider'

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatProgressBarModule,
    MatCardModule
  ],
  providers: [{provide: SAVER, useFactory: getSaver}],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Wir müssen die Seite dann mit einigen Stylings verschönern. Wir fügen dieses kleine Snippet in die Datei app.component.css ein.

Code-Snippet – app.component.css:

mat-card {
    display: flex;
    flex-direction: column;
  }

  .file {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

Ausgang:

Angular jpg-Datei zum Download

Abschluss

Je nachdem, welche Datei wir zum Download bereitstellen möchten, gibt es verschiedene Ansätze, die wir anwenden können, um dies in unserer Angular-Anwendung zu implementieren, indem wir Angular blob verwenden, um die Dateien zu speichern.

Autor: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

Verwandter Artikel - Angular Download