プログラム学習室 http://studyhallweb.com/

Dart言語: テキストファイルの読み込みとダウンロード

デモンストレーション (Demonstration)

Select text file in your PC.


サンプルコード (Sample Code)

HTML

Select text file in your PC.<br/>
<input type="file" id="fileSelect" size="50"><br/>
<textarea id="textedit" cols="80" rows="10"></textarea><br/>
<input type="submit" id="makeDownloadFile" value="Make Download File">
<a id="downLoadLink"></a>
					

Dart

import 'dart:html';

/**
 * テキストファイルを読み込んでテキストエリアに表示する
 * 参考:http://stackoverflow.com/questions/9212964/input-and-google-dart
 */
class fileRead {
  FileUploadInputElement input = querySelector('#fileSelect');
  FileReader reader = new FileReader();

  fileRead() {
    input.onChange.listen((e) => _readFile());
  }
  /**
   * ファイル読み込み
   */
  _readFile() {
    FileList files = input.files;
    File file = files[0];      // Inputは複数のファイルを選択可能であるが1つ目のファイルに限る
    if (file.type == 'text/plain') {
      reader.readAsText(file);  // ファイルの読み込み
      reader.onLoad.listen((e) => _viewFile(1));
      reader.onError.listen((e) => _readError());
    } else {
      _viewFile(0);
    }
  }
  /**
   * ファイルの表示
   */
  _viewFile(int i) {
    TextAreaElement fileText = querySelector('#textedit');
    if (i == 1) {
       fileText.value = reader.result.toString();
    } else {
       fileText.value = "テキストファイルを選択してください";
    }
  }
  _readError() {
    print('error ${reader.error.code}');
  }
}
/**
 * テキストエリアのテキストからダウンロードファイルを作成する
 * 参考:http://stackoverflow.com/questions/22334096/how-to-use-the-darthtml-library-to-write-files
 */
class filedownload {
  InputElement btnMakeFile = querySelector("#makeDownloadFile");
  AnchorElement link = querySelector('#downLoadLink');
  List<String> myData = new List();
  TextAreaElement textData = querySelector('#textedit');
  //  var myData = [ "Line 1\n", "Line 2\n", "Line 3\n"];

  filedownload() {
    btnMakeFile.onClick.listen((e) => _makeData());
    // textareaのonChangeはフォーカスが変更されないと検出されないため、別にボタンを用意
  }
  _makeData() {
    String allText = textData.value;
    myData = allText.split('\n');
    for (int i = 0; i < myData.length; i++) {
      myData[i] += '\n';
    }
    // ダウンロード用のリンクを作成する
    var blob = new Blob(myData, 'text/plain', 'native');
    link.download = 'studyhallweb-P027.txt';
    link.href = Url.createObjectUrlFromBlob(blob).toString();
    link.text = "Click to Download.";
  }
}
main() {
	new fileRead();
	new filedownload();
}
					

説明

ローカルファイルの読み込みはHTML5のFileReaderを使っています。
FileReader reader = new FileReader();
reader.readAsText(file);
reader.onLoad.listen((e) => _viewFile(1));
  :
_viewFile(int i) {
  TextAreaElement fileText = querySelector('#textedit');
  fileText.value = reader.result.toString();
  :
}					
					
readAsText() でテキストファイルを読み込んでいます。これは非同期ですので読み込みが終わったら onLoad.listen() で継続の処理を指定します。
読み込んだ内容をエレメントに反映させるために reader.result を使っています。

ダウンロードファイルはBlobを使って作成しています。
ほとんど、stackoverflow.com にあったコードそのままです。
var blob = new Blob(myData, 'text/plain', 'native');
link.download = 'studyhallweb-P027.txt';
link.href = Url.createObjectUrlFromBlob(blob).toString();
					
Google Chrome では正常に動作しますが、Internet Explorer 11 では動作が不完全なようです。
IE11ですと、指定のファイル名になりません。またクリックしてもダウンロードされません。右クリックして保存してください。