Laden Sie die Excel-Datei mit Angular herunter

Angular - es ist ein leistungsfähiges Framework, mit dem Sie moderne Webanwendungen entwickeln können. Eine wichtige Aufgabe bei der Entwicklung solcher Anwendungen ist die Möglichkeit, Dateien herunterzuladen oder herunterzuladen. In diesem Artikel werden wir uns ansehen, wie man eine Excel-Datei mit Angular herunterlädt.

Excel ist eine beliebte Anwendung für die Arbeit mit Tabellendaten. Es ist oft notwendig, die generierten Daten zur weiteren Verarbeitung oder Anzeige in eine Excel-Datei herunterzuladen. In Angular gibt es mehrere Möglichkeiten, eine Excel-Datei herunterzuladen, betrachten wir einige davon.

Der erste Weg ist die Verwendung der Bibliothek ExcelJS. Es ermöglicht Ihnen, Excel-Dateien zu erstellen und zu bearbeiten. Zuerst müssen Sie die Bibliothek mit dem Befehl npm install exceljs installieren. Sie können dann eine Instanz der ExcelJS-Klasse erstellen, die Daten hinzufügen und die Datei dann auf der Clientseite speichern. Diese Methode gibt Ihnen die vollständige Kontrolle über die von Excel erstellte Datei, erfordert jedoch einige Implementierungsaufwand.

Die zweite Methode besteht darin, ein bereits vorgefertigtes Paket zu verwenden ngx-export-as. Es bietet eine einfache Möglichkeit, eine Excel-Datei ohne unnötigen Aufwand herunterzuladen. Dazu müssen Sie das Paket mit dem Befehl npm install ngx-export-as installieren. Als nächstes importieren Sie das entsprechende Modul in die Anwendung und verwenden Sie die Export-Direktive für die Schaltfläche oder den Link, mit der der Download durchgeführt wird. Diese Methode erfordert minimalen Code und ermöglicht es Ihnen, eine Excel-Datei mit minimalem Aufwand herunterzuladen.

Wie man eine Excel-Datei in Angular herunterlädt

Wenn Sie eine Excel-Datei in Ihrem Angular-Projekt herunterladen möchten, müssen Sie einige Komponenten und Dienste verwenden. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Installieren Sie die erforderlichen Pakete:

Gehen Sie zu Ihrem Angular-Projekt und öffnen Sie die Konsole. Führen Sie dann den folgenden Befehl aus, um die Pakete zu installieren:

npm install file-saver --savenpm install xlsx --save

2. Erstellen Sie einen Service zum Herunterladen von Daten:

Erstellen Sie eine neue Datei mit dem Namen excel.service.ts und fügen Sie den folgenden Code hinzu:

import < Injectable >from '@angular/core';import * as FileSaver from 'file-saver';import * as XLSX from 'xlsx';@Injectable()export class ExcelService exportToExcel(jsonData: any[], fileName: string): void , SheetNames: ['data'] >;const excelBuffer: any = XLSX.write(workbook, < bookType: 'xlsx', type: 'array' >);const data: Blob = new Blob([excelBuffer], );FileSaver.saveAs(data, fileName + '.xlsx');>>

3. Verwenden Sie einen Service in einer Komponente:

Jetzt können Sie den ExcelService verwenden, um eine Excel-Datei herunterzuladen. Importieren Sie einfach den Service in Ihre Komponente und rufen Sie die ExportToExcel-Methode mit den Daten und dem Dateinamen auf:

import < Component >from '@angular/core';import < ExcelService >from './excel.service';@Component(Скачать excel файл `, styleUrls: ['./app.component.css'] >) export class AppComponent < constructor(private excelService: ExcelService) < >downloadExcelFile(): void < const jsonData = [ , , ]; this.excelService.exportToExcel(jsonData, 'users_data'); > > 

Wenn Sie nun auf die Schaltfläche "Excel-Datei herunterladen" klicken, wird die Excel-Datei heruntergeladen, die Ihren Daten entspricht.

Erforderliche Pakete installieren

Um eine Excel-Datei mit Angular herunterzuladen, müssen Sie die folgenden Pakete installieren:

1. Angular CLI

Die Angular CLI (Command Line Interface) ist ein Befehlszeilentool, das zum Entwickeln, Erstellen und Bereitstellen von Angular-Anwendungen verwendet wird. Sie können es mit dem folgenden Befehl installieren:

npm install -g @angular/cli

2. FileSaver.js

FileSaver.js ist eine JavaScript-Bibliothek, mit der Sie Dateien auf der Clientseite speichern können. Sie können es mit dem folgenden Befehl installieren:

npm install file-saver --save

3. XLSX

XLSX ist eine JavaScript-Bibliothek, mit der Sie mit Dateien im XLSX-Format (Excel) arbeiten können. Sie können es mit dem folgenden Befehl installieren:

npm install xlsx --save

Nachdem Sie diese Pakete installiert haben, können Sie mit der Entwicklung einer Funktion zum Herunterladen von Excel-Dateien mit Angular beginnen.