Excel IO要素を使用すると、Excelファイルのインポートおよびエクスポート機能を簡単に実現できます。
コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
| コマンドプロンプト |
コードのコピー
|
|---|---|
npm install -g @angular/cli |
|
Angularアプリを作成して、アプリフォルダに移動します。
| コマンドプロンプト |
コードのコピー
|
|---|---|
ng new spread-sheets-angular-cli
cd spread-sheets-angular-cli
|
|
Spread.Sheets本体、Angularモジュール、および日本語リソースを、npmからインストールします。
| コマンドプロンプト |
コードのコピー
|
|---|---|
npm install @grapecity/spread-sheets npm install @grapecity/spread-sheets-angular npm install @grapecity/spread-sheets-resources-ja |
|
Excel I/Oおよびfile-saverモジュールをプロジェクトにインストールするには、次のコマンドを使用します。
| コマンドプロンプト |
コードのコピー
|
|---|---|
npm install @grapecity/spread-excelio npm install file-saver --save |
|
次のように、angular.jsonファイルでSpreadJS CSSを構成します。
| angular.json |
コードのコピー
|
|---|---|
{
...
"projects":{
"spread-sheets-angular-cli":{
...
"architect":{
...
"build":{
...
options:{
...
"styles": [
"node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css"
],
...
}
...
}
...
}
...
}
}
...
}
|
|
Spread.Sheetsモジュールをインポートするには、app.module.tsファイルを次のように変更します。
| app.module.ts |
コードのコピー
|
|---|---|
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,SpreadSheetsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
|
SpreadJSコンポーネントを表示するには、app.component.htmlを次のように変更します。
| app.component.html |
コードのコピー
|
|---|---|
<div class='maincontainer'> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)"> </gc-spread-sheets> <div class='loadExcelInput'> <p>Open Excel File</p> <input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange($event)" /> </div> <div class='exportExcel'> <p>Save Excel File</p> <button (click)="onClickMe($event)">Save Excel!</button> </div> </div> |
|
Excel IO要素を使用して、Excelファイルのインポート／エクスポート機能を実装するには、app.component.tsを次のように変更します。
| app.component.ts |
コードのコピー
|
|---|---|
import { Component, ViewChild } from '@angular/core';
import * as GC from '@grapecity/spread-sheets';
import * as Excel from '@grapecity/spread-excelio';
import { saveAs } from 'file-saver';
// ライセンス情報
var SpreadJSKey = "xxxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
// また、SpreadJSキーをEXCELIOに設定する必要があります
(<any>Excel).LicenseKey = SpreadJSKey;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
spreadBackColor = 'aliceblue';
hostStyle = {
width: '95vw',
height: '80vh'
};
private spread!: GC.Spread.Sheets.Workbook;;
private excelIO;
constructor() {
this.excelIO = new Excel.IO();
}
workbookInit(args: { spread: GC.Spread.Sheets.Workbook; }) {
const self = this;
self.spread = args.spread;
const sheet = self.spread.getActiveSheet();
sheet.getCell(0, 0).text('Test ExcelIO').foreColor('blue');
}
onFileChange(args: any) {
const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
if (self.spread && file) {
self.excelIO.open(file, (json: Object) => {
self.spread.fromJSON(json, {});
setTimeout(() => {
alert('Excel loaded successfully');
}, 0);
}, (error: any) => {
alert('load fail');
});
}
}
onClickMe(args: any) {
const self = this;
const filename = 'ExportedExcel.xlsx';
const json = JSON.stringify(self.spread.toJSON());
self.excelIO.save(json, function (blob: any) {
saveAs(blob, filename);
}, function (e: any) {
console.log(e);
});
}
}
|
|
以下のコマンドでアプリを実行します。
| コマンドプロンプト |
コードのコピー
|
|---|---|
ng serve |
|