Question

我有一个包含文件集合的表。我的用例是，当用户单击该表中的一行时，将触发一个事件，该事件将调用该服务并获取JSON数据。每当用户单击表中的另一行时，JSON数据都会更改。因此，我将不具有特定的属性，或者说键（在键值对中）。我只是要以2D字符串数组的形式获取JSON数据。现在，我的任务是获取这些数据并将其导出到excel文档中。

Answer 1

我能够找到解决此问题的方法，并将其发布在这里。这是我为了完成这项工作所引用的链接。 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文档中获取数据。

如何使用Angular 7和PrimeNg将具有动态键值对且没有特定属性的JSON数据导出到Excel文件中？

1 个答案: