TechAcademyマガジンonchangeは、HTMLで用意したinputタグにファイルを指定した際に呼ばれるchangeイベントを処理するイベントハンドラです。
HTMLのファイルを指定する部品は、選択したファイルを配列で渡すのでfileInput.files[0]として1つ目のファイルを取得しています。
★ソースコード
html
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="file" id="file"> </body> <script src="app.js"></script> </html> |
js
|
1 2 3 4 5 6 7 8 |
let fileInput = document.getElementById('file'); let fileReader = new FileReader(); fileInput.onchange = () => { let file = fileInput.files[0]; fileReader.readAsText(file); }; fileReader.onload = () => console.log(fileReader.result); |
★メモ
FileReader オブジェクトを使うと、ユーザーのコンピューター内にあるファイル (もしくはバッファ上の生データ) をウェブアプリケーションから非同期的に読み込むことが出来ます。
読み込むファイルやデータは File ないし Blob オブジェクトとして指定します。
●コンストラクタ
・FileReader()
新しく作成された FileReader を返します。
●イベントハンドラー
・FileReader.onload
load イベントのハンドラーです。読込が成功したときにイベントが発生します。
●メソッド
・FileReader.readAsDataURL()
指定された Blob オブジェクトを読み込みます。
終了後の result プロパティには、ファイルのデータを示す data: URL が格納されます。
・FileReader.readAsText()
指定された Blob オブジェクトを読み込みます。
終了後の result プロパティには、ファイルの内容をテキストとして読み取った文字列が格納されます。
初心者向けにBlobをJavaScriptで使う方法について解説しています。
最初にバイナリデータとは何か、Blobの特徴とメリットについて説明します。
次に、Blobを使って作成したファイルのダウンロードリンクを表示させる例についてみていきましょう。
●Blobとは
Blobとは、BLOB（Binary Large Object）を扱うためJavaScriptのオブジェクトです。
コンピュータの中では、全て0と1でデータが管理されており、この0と1で表すデータがバイナリデータです。
●Blobの特徴や利用メリット
Blobはバイナリデータであるため、テキストファイルだけではなく画像やPDFなどいろいろな形式のファイルを扱うことができます。
また、JavaScriptのデータをBlobにすることで、ファイルにすることが可能です。
そのため、処理結果などをダウンロードさせたい場合などには使用しやすいといえるでしょう。
処理結果のデータをBlobにして、ダウンロードリンクのリンク先に指定することで、結果のデータファイルをダウンロード可能です。
●Blobの使い方
Blobは下記のコードで作成することが可能です。
new Blob([‘あいうえお’],{type:”text/plan”})で、Blobを作成しています。
|
1 2 |
new Blob([ファイルの内容の配列], MIMEタイプ); let blog = new Blob([ ‘あいうえお’], {type: “text/plan”}); |
第1引数にファイルの内容となる配列のオブジェクト、第2引数にファイルの種類となるMIMEタイプを指定しましょう。
★ソースコードその２
index.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="output_csv"></div> </body> <script src="app.js"></script> </html> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const outputElement = document.getElementById('output_csv'); function getCsvData(dataPath){ const request = new XMLHttpRequest(); request.addEventListener('load', (event) => { const response = event.target.responseText; convertArray(response); }); request.open('GET', dataPath, true); request.send(); } function convertArray(data){ const dataArray = []; const dataString = data.split('\n'); for (let i = 0; i < dataString.length; i++){ dataArray[i] = dataString[i].split(','); } let insertElement = ''; dataArray.forEach((element) => { insertElement += '<tr>'; element.forEach((childElement) => { insertElement += `<td>${childElement}</td>` }); insertElement += '</tr>'; }); outputElement.innerHTML = insertElement; } getCsvData('./example.csv'); |
メモ
①XMLHttpRequestで外部CSVデータを読み込む
CSVを読み込むのにHTTP通信で行いますが、今回は、XMLHttpRequest()を使います。
XMLHttpRequestのイベントハンドラである、「open()」の第一引数にはHTTPのリクエストメソッドのGETを指定し、第二引数には送信するソースファイルのURLを指定します。
第三引数は「true」を指定すると非同期通信とすることができます。
続けて「send()」でリクエストを送信します。
まずは外部のCSVデータを読み込むところから見ていきます。
確認用として値の出力先に適当なHTML要素を作成しておきます。
CSVを読み込むのにHTTP通信で行いますが、今回は、XMLHttpRequest()を使います。
XMLHttpRequestでHTTP通信を行う場合には、ローカルファイルですとクロスオリジンの制約でエラーとなりますので、localhostを起動したり、ウェブサーバー上で確認するようにします。
この処理を実際にブラウザで確認してみます。HTML上にはCSVのデータが文字列として出力され、コンソールでもCSVの値が確認することができます。
②CSVの文字列から配列に変換
先ほどのコードでCSVデータを取得できましたが、データとしては1つの文字列となっているので、データを加工する場合にはいろいろと不便です。
そこでCSVデータを文字列から配列に変換していきます。
ここでは配列変換用に新たな関数を定義し、先ほどの関数内で呼び出すようにしていきます。
文字列を配列に変換する関数では、まず空の配列を用意していき、その中に値を入れていることで配列に変えていきます。
今は1つの文字列となっていますので、まずは改行文字である「\n」で分割します。
これがCSVでの表組みの行単位になります。
③CSVデータを表組みでHTML上に出力
データが配列になったので、あとは値に対してHTMLとして出力する処理を繰り返していきます。
「forEach()」メソッドを使います。
今回は表組みでの出力を行いますので、HTML側にtable要素を用意しておき、trとtdタグで囲まれる形で出力していきます。
この記事へのコメントはありません。