Angularでテキストファイルを読み込む
Angularでブラウザから読み込んだローカルのテキストファイルを表示する方法です。
HTML5のFile APIの基本的な使い方が分かれば簡単な内容ですが、メモ程度に残しておきます。
早速、実装していきたいと思います。
以下で紹介する内容は、angluar-cliでng new
したプロジェクトのapp.componentにべた書きしているので、試しに動かす際はコピペすれば動くはずです。
環境
この記事で紹介する内容は、以下の環境で試しています。
$ ng -v @angular/cli: 1.4.1 node: 8.1.3
実装例
まずは、テンプレート側です。
テキストファイルを読み込むための<input>
と、読み込んだテキストの内容を表示するための<p>
タグを配置しました。
<!-- テキストファイルを選択するinput --> <input type="file" (change)="onChangeInput($event)"> <!-- テキストファイルの内容を表示するエリア --> <p>{{readText}}</p>
次に、クラス側です。
まず、input
のchangeイベントにバインドされたonChangeInput()
メソッド内で、fileオブジェクトをfileToText()
メソッドに渡しています。
fileToText()
メソッドは、FileReaderの結果をPromiseで返します。
※ここではエンコーディング未指定なので、デフォルトのUTF-8 で解釈されます。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public readText: string = null; onChangeInput(evt) { const file = evt.target.files[0]; this.fileToText(file) .then(text => { this.readText = text; }) .catch(err => console.log(err)); } fileToText(file): Promise<string> { const reader = new FileReader(); reader.readAsText(file); return new Promise((resolve, reject) => { reader.onload = () => { resolve(reader.result); }; reader.onerror = () => { reject(reader.error); }; }); } }
読み込んだテキストが正しく改行されるように、cssも修正しておきます。
p { white-space: pre-wrap; }
試してみる
試しに、次のようなファイルをアップロードしてみます。
用意したテキストファイル
inputから用意したテキストファイルを選択した結果
以上です。