由于 Angular 属于前端框架，用官方的话说，浏览器端不应该有读写文件的权限

因此类似于 fs 这一类的 nodejs 内置模块都是被屏蔽的

想要实现 Excel 导入导出需要另辟捷径

下面就是实现代码

excel.service.ts 文件

需要安装 XLSX package: npm i --save xlsx

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);
            };
        });
    }
}

使用

Ex. path.component.ts

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);
            });
    }
}

本文由 Oscaner 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019-06-24 23:12 星期一