Как экспортировать данные JSON с парами значений динамического ключа без особых свойств в файл Excel, используя Angular 7 и PrimeNg? - PullRequest
Новая
       7

Как экспортировать данные JSON с парами значений динамического ключа без особых свойств в файл Excel, используя Angular 7 и PrimeNg?

0 голосов
/ 13 июня 2019

У меня есть таблица, которая содержит коллекцию файлов. Мой вариант использования состоит в том, что, когда пользователь щелкает строку в этой таблице, запускается событие, которое вызовет службу и получит данные JSON. данные JSON будут меняться всякий раз, когда пользователь нажимает на другую строку в таблице. Поэтому я не собираюсь иметь конкретные свойства или, скажем, ключи (в паре ключ-значение). Я просто собираюсь получить данные JSON в виде массива 2D строк. Теперь моя задача - получить эти данные и экспортировать их в документ Excel.

1 Ответ

0 голосов
/ 20 июня 2019

Мне удалось найти решение этой проблемы, и я публикую его здесь. Вот ссылки, на которые я ссылался, чтобы сделать эту работу. https://stackblitz.com/edit/angular6-export-xlsx https://medium.com/@madhavmahesh/exporting-an-excel-file-in-angular-927756ac9857

Первое, что нужно сделать, это 

npm install xlsx

Тогда создайте сервис -> 

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE =
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {
    constructor() {}

    public exportAsExcelFile(json: any[], excelFileName: string): void {
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
        console.log('worksheet', worksheet);
        const workbook: XLSX.WorkBook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
        const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        // const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
        this.saveAsExcelFile(excelBuffer, excelFileName);
    }

    private saveAsExcelFile(buffer: any, fileName: string): void {
        const data: Blob = new Blob([buffer], {
            type: EXCEL_TYPE
        });
        FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
    }
}

Импортируйте этот сервис в ваш основной компонент (app.module.ts или любой другой компонент). Убедитесь, что вы добавили эту услугу в массив «Поставщики».

Затем добавьте эту функцию в ваш файл TS -> 

  exportAsXLSX(): void {

        this.someService.getFileData(this.clientFile).subscribe(
            (res: any) => {
                if (res.data) {
                    this.fileData = res.data;
                }
            },
            err => {
                let someMsg = 'Error exporting file';
                if (err.status === 409) {
                    someMsg =
                        err.error.error.errorMessage.length > 0
                            ? err.error.error.errorMessage
                            : someMsg;
                }
                this.toastService.error(someMsg);
            }
        );
        this.excelService.exportAsExcelFile(this.fileData, 'sample');
    }

Здесь this.fileData - это массив типа any, определенный как fileData: any [] в моем компоненте. Вам решать, как получить данные в этом массиве. Главное, передать это функции, которая преобразует это в excel. Теперь, когда у вас написан сервис и у вашего компонента есть функция, пришло время подключить его к HTML-файлу. 

                 <div class="ui-helper-clearfix">
                        <button
                            type="button"
                            pButton
                            icon="fa fa-file-excel-o"
                            iconPos="left"
                            label="Export To Excel"
                            (click)="exportAsXLSX()"
                            style="float:left"
                        ></button>
                    </div>

При нажатии кнопки вы сможете получить данные в документе Excel.

...