FileSaver.js を使ってみる。

ローカルファイルへの書き込みをJavaScript で実行する場合、window.URL の createObjectURL を使うか、
jQuery プラグイン FileSaver.js から選択するであろうが、
createObjectURL の方は、IE11 においては、作成されたリンクをクリックしても無反応、右クリック対象をファイル保存もできない。

FileSaver.js の方は、IE11 でも動く。FileSaver.js は、W3C作業グループ作成のNote に従い、BLOB データ保存を
実装しているが、実行するといきなりローカルファイルに書こうとするので注意が必要だ。
http://www.w3.org/TR/2014/NOTE-file-writer-api-20140424/

実験したソースは以下のとおり。

$(function(){
   $('#run1').click(function(){
      var blobData = new window.Blob([$('#content').val()],{type:'text/plain'});
      var url = window.URL || window.webkitURL;
      $('#aout').html('<a href="' + url.createObjectURL(blobData) + '" download="a.txt">out file</a>');
   });
   $('#run2').click(function(){
      var blobData = new window.Blob([$('#content').val()],{type:'text/plain'});
      saveAs(blobData, "aout.txt");
      console.log("OK");
   });
});

saveAs というのが、FileSaver.js が提供するメソッド、指定するローカルファイル名でブラウザの
ダウンロードファイルとして書こうとする。

------------------

<textarea rows="20" cols="120" id="content">
テスト　ABC
あいうえお
1234567
</textarea>
<div>
   <table class="frame">
      <tr>
         <td><button id="run1">createObjectURL</button></td>
         <td><button id="run2">FileSaver.js→aout.txt</button></td>
      </tr>
   </table>
</div>
<br/><br/><br/>
<div>
   <span id="aout"></span>
</div>

いずれも、ＵＴＦ－８、改行コードは、LF のみ。
使用時は、UI に注意したいところだ。