Stáhněte si excel soubor pomocí Angular

Angular - je to výkonný framework, který vám umožňuje vyvíjet moderní webové aplikace. Jedním z důležitých úkolů při vývoji takových aplikací je možnost stahovat nebo stahovat soubory. V tomto článku se podíváme na to, jak stáhnout excel soubor pomocí Angular.

Excel je oblíbenou aplikací pro práci s tabulkovými daty. Často je potřeba stáhnout vygenerovaná data v aplikaci excel soubor pro další zpracování nebo prohlížení. Angular má několik způsobů, jak stáhnout soubor excel, zvažte některé z nich.

Prvním způsobem je použití knihovny ExcelJS. Umožňuje vytvářet a manipulovat s excel soubory. Nejprve musíte nainstalovat knihovnu pomocí příkazu npm install exceljs. Poté můžete vytvořit instanci třídy ExcelJS, přidat data a poté soubor uložit na klientskou stranu. Tato metoda poskytuje úplnou kontrolu nad souborem excel, který vytváříte, ale vyžaduje určité úsilí k implementaci.

Druhým způsobem je použití již hotového balíčku ngx-export-as. Poskytuje snadný způsob, jak stáhnout excel soubor bez zbytečných nákladů na práci. Chcete-li to provést, musíte nainstalovat balíček pomocí příkazu npm install ngx-export-as. Dále importujte příslušný modul do aplikace a použijte směrnici exportAs pro tlačítko nebo odkaz, pomocí kterého bude stahování provedeno. Tato metoda vyžaduje minimální kód a umožňuje stáhnout soubor excel s minimálním úsilím.

Jak stáhnout excel soubor v Angular

Pokud si chcete stáhnout excel soubor ve svém projektu Angular, budete muset použít některé komponenty a služby. Zde je podrobný průvodce:

1. Nainstalujte potřebné balíčky:

Přejděte do svého projektu Angular a otevřete konzolu. Poté spusťte následující příkaz a nainstalujte balíčky:

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

2. Vytvořte službu pro stahování dat:

Vytvořte nový soubor s názvem excel.service.ts a přidejte následující kód:

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. Použijte službu v komponentě:

Nyní můžete použít službu ExcelService ke stažení souboru excel. Stačí import služba do vaší součásti a zavolat metodu exportToExcel s daty a názvem souboru:

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'); > > 

Nyní, když kliknete na tlačítko "Stáhnout excel soubor", bude stažen excel soubor odpovídající vašim datům.

Instalace potřebných balíčků

Chcete-li stáhnout soubor excel pomocí Angular, budete muset nainstalovat následující balíčky:

1. Angular CLI

Angular CLI (Command Line Interface) je nástroj příkazového řádku, který se používá k vývoji, sestavení a nasazení aplikací Angular. Nainstalovat jej lze pomocí následujícího příkazu:

npm install -g @angular/cli

2. FileSaver.js

FileSaver.js je knihovna JavaScriptu, která Vám umožňuje ukládat soubory na stranu klienta. Nainstalovat jej lze pomocí následujícího příkazu:

npm install file-saver --save

3. XLSX

XLSX je knihovna JavaScriptu, která Vám umožňuje pracovat se soubory formátu XLSX (Excel). Nainstalovat jej lze pomocí následujícího příkazu:

npm install xlsx --save

Po instalaci těchto balíčků budete připraveni začít vyvíjet funkce pro stahování souborů excel pomocí Angular.