Wie man XLSX im Browser in Angular exportiert & herunterlädt (minimales Beispiel)

Dieses Beispiel verwendet die xlsx-Bibliothek und die file-saver-Bibliothek, um eine (leere) XLSX-Datei zu erstellen und herunterzuladen, alles auf der Client-Seite.

Installiere zunächst die Bibliotheken:

install_deps.sh

npm i --save file-saver xlsx
npm i --save-dev @types/file-saver

npm i --save file-saver xlsx
npm i --save-dev @types/file-saver

Importiere diese mit

export-xlsx.ts

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

Hier ist der Hauptteil des Codes, der die XLSX-Datei erstellt:

export-xlsx.ts

// Leeres Workbook erstellen
const wb = XLSX.utils.book_new();

// Leeres Worksheet erstellen
// Wenn dies kein minimales Beispiel wäre, würden deine Daten hier stehen
const ws = XLSX.utils.aoa_to_sheet([[]]);

// Worksheet zum Workbook hinzufügen
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// Workbook ins XLSX-Format exportieren
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' });

// Binärdaten in einen Blob konvertieren
const blob = new Blob([wbout], { type: 'application/vnd.ms-excel' });

// Download der Datei mit file-saver
saveAs(blob, 'example.xlsx');

// Leeres Workbook erstellen
const wb = XLSX.utils.book_new();

// Leeres Worksheet erstellen
// Wenn dies kein minimales Beispiel wäre, würden deine Daten hier stehen
const ws = XLSX.utils.aoa_to_sheet([[]]);

// Worksheet zum Workbook hinzufügen
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// Workbook ins XLSX-Format exportieren
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' });

// Binärdaten in einen Blob konvertieren
const blob = new Blob([wbout], { type: 'application/vnd.ms-excel' });

// Download der Datei mit file-saver
saveAs(blob, 'example.xlsx');