Web Components Spreadsheet の概要
Web Components Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。すべての情報は、セル、ペイン、およびワークシート間を直感的かつ簡単にナビゲートできる表形式で表示できます。IgcSpreadsheetComponent
は、Excel のような柔軟なインターフェイス、詳細なチャート、およびアクティブ化、セル編集、条件付き書式設定、スタイル設定、選択、クリップボードなどの機能によって補完されます。
Web Components Spreadsheet の例
import { saveAs } from "file-saver" ;
import { Workbook } from 'igniteui-webcomponents-excel' ;
import { WorkbookFormat } from 'igniteui-webcomponents-excel' ;
import { WorkbookSaveOptions } from 'igniteui-webcomponents-excel' ;
import { WorkbookLoadOptions } from 'igniteui-webcomponents-excel' ;
import { IgcExcelXlsxModule } from 'igniteui-webcomponents-excel' ;
import { IgcExcelCoreModule } from 'igniteui-webcomponents-excel' ;
import { IgcExcelModule } from 'igniteui-webcomponents-excel' ;
IgcExcelCoreModule.register();
IgcExcelModule.register();
IgcExcelXlsxModule.register();
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, new WorkbookLoadOptions(), (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, new WorkbookLoadOptions(), (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);
}
});
}
}
ts コピー import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet' ;
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet' ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { Workbook } from 'igniteui-webcomponents-excel' ;
import { WorkbookOptionsBase, WorkbookFormat } from 'igniteui-webcomponents-excel' ;
import { ExcelUtility } from './ExcelUtility' ;
ModuleManager.register(IgcSpreadsheetModule);
export class SpreadsheetOverview {
private spreadsheet: IgcSpreadsheetComponent;
constructor ( ) {
this .spreadsheet = document .getElementById('spreadsheet' ) as IgcSpreadsheetComponent;
let path = 'https://static.infragistics.com/xplatform/excel/SalesData.xlsx' ;
ExcelUtility.loadFromUrl(path).then((w ) => {
this .spreadsheet.workbook = w;
});
}
}
new SpreadsheetOverview();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > SpreadsheetOverview</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample" >
<igc-spreadsheet id ="spreadsheet" width ="100%" height ="100%" >
</igc-spreadsheet >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
機能
Excel スプレッドシートと同様に、フィルタリング機能、ソート、セルの移動、セルの色に関するカスタマイズ、キーボード ショートカットを適用したり、数式を計算する機能を追加したりできます。
Spreadsheet の使用
スプレッドシートはすべての最新のブラウザーと互換性があり、完璧な機能と簡便性を保証しながら、複雑で膨大なスプレッドシート モデル用に最適化されています。
必要な機能のオン/オフを簡単に選択、追加、削除、切り替え、React シートを瞬時に構成できるため、すべてがエンドユーザーのニーズに応えます。構成可能なライブラリ、スタイルとフォーマットの選択肢、表示オプション、選択できるテーマもたくさんあります。
Excel でデータを操作するのと同じように、スプレッドシート コンポーネントは、コピー、貼り付け、切り取りなど、よく知られているすべての Excel クリップボード操作を提供します。すぐに使い始めるために、追加のトレーニングや新しいスキルは必要ありません。また、ソート、完全なキーボード ナビゲーション、値と数式、セルのドラッグ、列と行の編集、フィルタリング、数値の書式設定、サイズ変更のオプションも付属しています。スマートで高速な計算エンジンは、最も複雑な推定にも対応します。Excel に依存しません。
科学、ビジネス、エンジニアリング、財務、教育のデータを収集して管理します。分析、高度なグリッド、レポート、データ入力フォーム、予算編成、予測シナリオ、カスタム スプレッドシートを準備および作成します。これらすべてが包括的な API のおかげです。
データ処理は 100% 安全です。
Excel と CSV のインポートとエクスポート
組み込みの Excel インポート/エクスポート機能を使用すると、Excel ドキュメントを即座にロードして開き、オンデマンドで表示したり、変更を追加したり、保存したりできます。また、完成した Excel.xlsx スプレッドシートを簡単にエクスポートできます。
依存関係
Web Components スプレッドシート コンポーネントをインストールするときは、core パッケージと excel パッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-excel
npm install --save igniteui-webcomponents-spreadsheet
cmd
モジュールの要件
IgcSpreadsheetComponent
を作成するには、以下のモジュールが必要です。
import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { IgcExcelModule } from 'igniteui-webcomponents-excel' ;
import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet' ;
ModuleManager.register(
IgcExcelModule,
IgcSpreadsheetModule
);
ts
使用方法
Web Components スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。
<igc-spreadsheet id ="spreadsheet" height ="500px" width ="100%" >
</igc-spreadsheet >
html
次のコード スニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。
以下は、ワークブックを Web Components スプレッドシートにロードする方法を示しています。
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet' ;
import { Workbook } from 'igniteui-webcomponents-excel' ;
import { ExcelUtility } from "./ExcelUtility" ;
let spreadsheet = (document .getElementById("spreadsheet" ) as IgcSpreadsheetComponent);
const excelFile = '../../assets/Sample1.xlsx' ;
ExcelUtility.loadFromUrl(excelFile).then((w: Workbook ) => {
spreadsheet.workbook = w;
});
ts
API リファレンス