Як експортувати та завантажити XLSX у браузері в Angular (мінімальний приклад)

Цей приклад використовує бібліотеку xlsx та бібліотеку file-saver для створення (порожнього) XLSX-файлу та його завантаження, повністю на стороні клієнта.

Спочатку встановіть бібліотеки:

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

Імпортуйте їх за допомогою

export-xlsx.ts

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

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

Ось основна частина коду, яка створює XLSX:

export-xlsx.ts

// Створити порожню робочу книгу
const wb = XLSX.utils.book_new();

// Створити порожній аркуш
// Якби це не був мінімальний приклад, ваші дані були б тут
const ws = XLSX.utils.aoa_to_sheet([[]]);

// Додати аркуш до робочої книги
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// Експортувати робочу книгу у формат XLSX
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' });

// Перетворити двійкові дані на Blob
const blob = new Blob([wbout], { type: 'application/vnd.ms-excel' });

// Завантаження файлу за допомогою file-saver
saveAs(blob, 'example.xlsx');

// Створити порожню робочу книгу
const wb = XLSX.utils.book_new();

// Створити порожній аркуш
// Якби це не був мінімальний приклад, ваші дані були б тут
const ws = XLSX.utils.aoa_to_sheet([[]]);

// Додати аркуш до робочої книги
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// Експортувати робочу книгу у формат XLSX
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' });

// Перетворити двійкові дані на Blob
const blob = new Blob([wbout], { type: 'application/vnd.ms-excel' });

// Завантаження файлу за допомогою file-saver
saveAs(blob, 'example.xlsx');