-
必要なパッケージのインストール: Angularでは、xlsxファイルを扱うためのライブラリとして「xlsx」パッケージが利用できます。まずは、Angularプロジェクトのルートディレクトリで以下のコマンドを実行し、パッケージをインストールします。
npm install xlsx --save
-
ファイルのアップロード: XLSXファイルを読み込むためには、まずファイルをアップロードする必要があります。Angularでは、ファイルアップロードに「input type="file"」要素を使用します。以下のようなコードをHTMLテンプレートに追加します。
<input type="file" (change)="onFileChange($event)" />
onFileChange(event) { const file = event.target.files[0]; this.readFile(file); }
-
ファイルの読み込み: アップロードされたファイルを読み込むために、以下のコードをAngularコンポーネントに追加します。
import * as XLSX from 'xlsx'; // ... readFile(file) { const reader = new FileReader(); reader.onload = (e: any) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); console.log(jsonData); // データを表示するか、適宜処理を行います }; reader.readAsArrayBuffer(file); }
上記のコードでは、XLSXパッケージの
read
関数を使用してファイルを読み込み、sheet_to_json
関数を使用してシートのデータをJSON形式に変換しています。適宜処理を追加して、データを表示したり必要な処理を行ったりしてください。
以上が、Angular 5でXLSXファイルを読み込むための基本的な手順とコード例です。必要に応じて、エラーハンドリングや追加の機能を実装することができます。