Migaro. 技術Tips

                       

ミガロ.　製品の技術情報
IBMiの活用に役立つ情報を掲載！


JavaScriptで手軽にテキストファイルやCSVダウンロードを実装する方法

2022/06/17

SmartPad4iでは、CSVファイルを出力できるAPIがあり、簡単に容量の大きなCSVファイルや、タブ区切りのファイルを取得できます。出力するテキストファイル(CSV)のデータが少量の場合には、APIだけでなく、JavaScriptを使用して手軽にファイルダウンロードを実装することも可能です。
Tipsでは、SmartPad4iのサブファイル(tableタグ)に出力した情報から、JavaScriptを使用してtxtファイルやcsvファイルを取得する方法についてご紹介します。

SmartPad4iアプリでサブファイル(tableタグ)を作成

SmartPad4iでサブファイルを作成するには、tableタグを記述して、td要素内に入力欄や、ラジオボタン等の要素を設定したり、tdタグへid属性を設定します。
また、サブファイルとして認識させるために、tableタグ自体にid属性を設定することも必要です。SmartPad4i Designerで読み込むだけで、サブファイルとしてタグが認識されます。

Tipsでは、以下アプリケーションのサブファイルのデータをテキストファイルでダウンロードします。

サンプルのアプリ

SmartPad4i Designerの定義

アプリケーションのサブファイルは、Designerでは以下のように定義されています。

SmartPad4i Designer

サブファイルの中にラベル要素LB01～LB05までが定義されています。それぞれ文字列のラベル要素です。

テキストファイルダウンロード処理の実装

テキストファイルダウンロード処理の実装は以下になります。

  1. HTMLの編集　テーブルタグ (データを取得しやすいように属性を変更)
  2. HTMLの編集　ボタンの追加
  3. JavaScriptの追加　ダウンロード処理記述

1.HTMLの編集　テーブルタグ

テーブルタグのHTMLを以下のように変更しました。
ダウンロード対象のデータを取得しやすいようにカスタムデータ属性data-dwn-fieldを定義して、それぞれに識別用の名前を設定しています。

カスタムデータ属性data-dwn-fieldと設定していますが、カスタムデータ属性は、自由に名称を設定できるため、任意の名前を設定しても問題ありません。

<table class="table is-fullwidth is-hoverable" id="SFL01"> 
  <tbody>
    <tr>
      <td id="LB01" data-dwn-field="userid"   > ykunimoto@migaro.co.jp</td>
      <td id="LB02" data-dwn-field="username" style="width:120px">ミガロ. 太郎</td>
      <td id="LB03" data-dwn-field="userdep"  style="width:120px">営業部</td>
      <td id="LB04" data-dwn-field="userauth" style="width:120px">管理者</td>
      <td id="LB05" data-dwn-field="userdate" style="width:110px">2021-12-31</td>  
    </tr>
  </tbody>
</table>

2.HTMLの編集　ボタンの追加

次に、ダウンロード用のボタンを追加します。

ダウンロード用ボタン追加

ダウンロード用ボタンのクリック時に処理を追加するため、以下のようにid属性を追加しています。

<div class="is-flex is-justify-content-left">
  <a class="button is-info load-b" id="DOWNT" >
    <i class="fa fa-download"></i>Download
  </a>
</div>

3.JavaScriptの追加　ダウンロード処理記述

ダウンロードボタンがクリックされた際の処理を追加します。
JavaScriptの処理は、以下の手順となります。

  • 対象データを配列に取得
  • 対象データをテキストデータに変換
  • URLオブジェクトに変換してアンカータグからダウンロード

対象データを配列に取得

ダウンロードボタン(id属性DOWNT)をクリック時に実行する処理を記述しています。

  $('#DOWNT').on('click',function(){
    var id_arr = $.makeArray($('[data-dwn-field="userid"]'));
    var name_arr = $.makeArray($('[data-dwn-field="username"]'));
    var dep_arr = $.makeArray($('[data-dwn-field="userdep"]'));
    var auth_arr = $.makeArray($('[data-dwn-field="userauth"]'));
    var date_arr = $.makeArray($('[data-dwn-field="userdate"]'));
    var data = [];
    var loopCount = $('[data-dwn-field="userid"]').length;
    for(var i=0;i<loopCount;i++){
      var line = [];
      line.push(id_arr[i].innerText);
      line.push(name_arr[i].innerText);
      line.push(dep_arr[i].innerText);
      line.push(auth_arr[i].innerText);
      line.push(date_arr[i].innerText);
      data.push(line);
    }
  });

最初にdataの配列要素を定義します。
dataの配列要素は、テキストデータの元となる、行全体のデータです。
次にdata-dwn-field=”userid”の個数を取得してループ数(loopCount)としています。

line配列は、行のデータを格納します。
各フィールドのテキスト情報をline配列に追加後、dataの配列に追加しています。
dataの配列の中にline配列が格納されている、2次元配列の形式でデータを取得します。

対象データをテキストデータに変換

取得した2次元配列のデータを、テキストデータに変換します。
「対象データを配列に取得」のJavaScriptの続きに記述しています。
前の箇所は<!– 省略 –>の部分になります。

  $('#DOWNT').on('click',function(){
    <!-- 省略 -->
    // BOM(Byte Order Mark)
    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);     
    // Tab区切り テキストデータ
    var text_data = data.map(function(i){return i.join('\t')}).join('\r\n');
    var blob = new Blob([bom, text_data], { type: 'text/plain' });
  });

最初にBOMを設定します。
BOMはByte Order Markの略です。
詳しくは、以下URLを参照ください。

■バイト順マーク
https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E9%A0%86%E3%83%9E%E3%83%BC%E3%82%AF

bom変数にBOMのデータを格納後、テキストデータを作成します。
配列のメソッド mapを使用してタブ区切りのデータを作成しています。
タブ区切りにしていますが、mapメソッドの処理を変更することでCSV形式のファイルにすることもできます。

例えば、カンマ区切りにする場合は以下になります。

var text_data = data.map(function(i){return i.join(',')}).join('\r\n');

■Array.prototype.map()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

mapメソッドのcallback関数で配列要素を取得、joinメソッドで配列をタブ区切りに変換します。

■Array.prototype.join()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

text_data 変数に出力対象の文字列が設定されます。
Blobコンストラクタを使用して、Blob オブジェクトを作成します。

■Blob
https://developer.mozilla.org/ja/docs/Web/API/Blob/Blob

URLオブジェクトに変換してアンカータグからダウンロード

Blobに変換した要素をオブジェクトURLに変換してダウンロード処理を行います。
前の続きの処理に、JavaScriptを追加していきます。

  //テキストファイル
  $('#DOWNT').on('click',function(){
    <!-- 省略 -->
    var url = URL.createObjectURL(blob);
    var anchor = $('<a></a>');
    anchor.attr('download','sample.txt');
    anchor.attr('href', url);
    // ダウンロード
    $(anchor)[0].click();
    URL.revokeObjectURL(url);
  });

blobをURL.createObjectURLスタティックメソッドを利用して、オブジェクトURLに変換します。
変換したオブジェクトURLはurl変数に格納しています。

■URL.createObjectURL()
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL

ダウンロードするためのアンカータグをjQueryで作成します。
$(‘<a></a>’)　の記述でアンカータグを作成できます。
作成したタグは、anchor変数に格納されています。
anchor変数にdownload属性(ファイル名)、href属性(オブジェクトURL)を設定後、clickメソッドでクリック処理してファイルをダウンロードしています。
最終行の、URL.revokeObjectURLは作成したurlオブジェクトを開放するための静的メソッドです。

■URL.revokeObjectURL()
https://developer.mozilla.org/ja/docs/Web/API/URL/revokeObjectURL

以上で実装は終了です。

追加したJavaScript全体

全体のJavaScriptは以下です。

$('#DOWNT').on('click',function(){
  var id_arr = $.makeArray($('[data-dwn-field="userid"]'));
  var name_arr = $.makeArray($('[data-dwn-field="username"]'));
  var dep_arr = $.makeArray($('[data-dwn-field="userdep"]'));
  var auth_arr = $.makeArray($('[data-dwn-field="userauth"]'));
  var date_arr = $.makeArray($('[data-dwn-field="userdate"]'));
  var data = [];
  var loopCount = $('[data-dwn-field="userid"]').length;
  for(var i=0;i<loopCount;i++){
     var line = [];
     line.push(id_arr[i].innerText);
     line.push(name_arr[i].innerText);
     line.push(dep_arr[i].innerText);
     line.push(auth_arr[i].innerText);
     line.push(date_arr[i].innerText);
     data.push(line);
  }
  // BOM(Byte Order Mark)
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);     
  // Tab区切り テキストデータ
  var text_data = data.map(function(i){return i.join('\t')}).join('\r\n');
  var blob = new Blob([bom, text_data], { type: 'text/plain' });
  var url = URL.createObjectURL(blob);
  var anchor = $('<a></a>');
  anchor.attr('download','sample.txt');
  anchor.attr('href', url);
  // ダウンロード
  $(anchor)[0].click();
  URL.revokeObjectURL(url);
});

ダウンロードできるファイル

ダウンロードボタンをクリックすると、テキストファイル(sample.txt)がダウンロードされます。

ダウンロードしたファイルは、タブ区切り UTF-8形式のBOM付きテキストファイルになります。

終わりに

今回のTipsは、JavaScriptで手軽にテキストファイルダウンロードを実装する方法をご紹介しました。手軽にテキストファイルのダウンロード機能を追加したい場合には是非ご活用ください。

Migaro.技術Tips一覧へ

 

株式会社ミガロ．

© 2024 MIGARO CO.,LTD.