Ignite UI for Angular 10.0.7バージョン時点での情報に基づいています。

テンプレート用のExcelファイルを読み込み、必要なデータを書き出し、Excelファイルに保存するサンプルです。

テンプレート用のExcelファイル

データを書き出した後のイメージ

コードスニペット

1. app.module.ts

IgxExcelModuleをインポートします。

 app.module.ts
...
import { IgxExcelModule } from 'igniteui-angular-excel';

@NgModule({
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxExcelModule,
  ],
  ...
})
...
2. app.component.html

input(type=”file”)でファイルを選択するダイアログを配置しています。

<!-- app.component.html -->
<input
  type="file" #fileInput
  accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  (change)="changeFile($event, fileInput.files)"/>
3. app.component.ts

input(type=”file”)のchangeイベントのイベントハンドラーchangeFile()内で、Excelファイルのロード、データの書き込み、保存、をしています。

// app.component.ts
import { ExcelUtility } from "./ExcelUtility";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'kb3886-app1';

  public gridData: any[];

  constructor() {
  }

  ngOnInit(): void {
    this.gridData = [];
    for(let i = 0; i < 5; i++){
      this.gridData.push({ID: i, TaskName: "Task " + i, Assignee: "担当者" + i, Progress: Math.floor(Math.random () * 11) * 10 });
    }
  }

  public async changeFile(event, files: any): Promise<void> {

    // Workbookの読み込み
    var workbook = ExcelUtility.load(files[0]);

    // gridDataの記入
    let rowOffset = 5;
    let cellOffset = 1;
    let keys = Object.keys(this.gridData[0]);
    for(let i = 0; i < this.gridData.length; i++ ){
      for(let j = 0; j < keys.length; j++){
        (await workbook).worksheets(0).rows(i + rowOffset).cells(j + cellOffset).value = this.gridData[i][keys[j]];
      }
    }

    // Workbookの保存
    ExcelUtility.save(await workbook, "TaskProgress");
  }
}
4. ExcelUtility.ts

Excelファイルを取り扱うにあたって、便利なメソッドを集めたユーティリティークラスです。「Excel ユーティリティ」からコピーしてきています。

// ExcelUtility.ts
import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8"
import { Workbook } from 'igniteui-angular-excel';
import { WorkbookFormat } from 'igniteui-angular-excel';
import { WorkbookSaveOptions } from 'igniteui-angular-excel';

export class ExcelUtility {
    public static getExtension(format: WorkbookFormat) {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, null, (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}

 

サンプル

実行し、ファイル選択ボタンで同梱されているTemplateBook1.xlsxを選択すると、gridDataのデータを書き出したものがTaskProgress.xlsxとして保存・ダウンロードされる動作になっています。

 

リファレンス

 

Tagged:

製品について

Ignite UI for Angular