AngularJS 实现 Excel 导入导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';

const excel = {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
    extension: 'xlsx',
    fileAccept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
};

export abstract class ExcelModel {
    abstract export(json: any[], fileName: string): void;
    abstract read(file: Blob): Promise<any>;
}

@Injectable()
export class ExcelService extends ExcelModel {
    constructor() {
        super();
    }

    export(json: any[], fileName: string): void {
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, fileName);
        const fullName = `${fileName}_export_${new Date().getTime()}.${excel.extension}`;
        XLSX.writeFile(workbook, fullName);
    }

    read(file: Blob): Promise<any> {
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        const json_object = {};
        return new Promise({resolve, reject} => {
            reader.onload = function() {
                const data = reader.result;
                const workbook = XLSX.read(data, {type: 'binary'});
                workbook.SheetNames.forEach((sheetName) => {
                    const xl_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
                    json_object[sheetName] = JSON.stringify(xl_row_object);
                });
                return resolve(json_object);
            };
        });
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { Component } from '@angular/core';
import { ExcelService } from '{path}/excel.service';

@Component({
    selector: 'ngx-path',
    templateUrl: './path.component.html',
    styleUrls: ['./path.component.scss'],
})
export class PathComponent {
    constructor(private excel: ExcelService) {}

    onExportConfirm(): void {
        const message = 'Are you sure you want to export all paths?';
        if (window.confirm(message)) {
            this.path.getAll()
                .subscribe(
                    (response) => {
                        this.excel.export(response.data, 'sitemap');
                    },
                );
        }
    }

    onReadConfirm(event): void {
        this.excel.read(event.target.files[0])
            .then((result) => {
                console.log(result);
            });
    }
}