技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

JavaScript:ブラウザからローカルのテキストファイルの入出

JavaScriptをブラウザから使用する場合、セキュリティによりローカルへのテキストファイルへのアクセスは制限されています。
その制約の中で、下記の方法を使用すれば、ローカルのテキストファイルへの入出力が可能になります。
 
・入力
 テキストファイルをJavaSctipt形式に変換し、変数として読み込む。
 参考:ChromeでJSからローカルファイルアクセスしたい - Qiita
 
・出力
 HTMLのaタグを使用してダウンロードさせる。
 aタグの仕様上、ダウンロード先のパスは自ユーザーのDownloadsフォルダになる。
 (ただし、aタグのdownload属性はIEでは使用不可)
 
以下、サンプルコードです。
 
【サンプルコード】
・test.html
<html>
 <head>
  <meta charset="utf-8">
  <title>test</title>
 </head>
 <body>
  <!-- js形式に変換したローカルファイルを読み込み -->
  <!-- 更新があった場合はリロードが必要 -->
  <script type="text/javascript" src="./test2.js"></script>
  
  <script type="text/javascript">
   
   function buttonClick(){
    let str = "HelloWorld!\r\nこんにちは世界!\r\n"; // 出力文字列
    let ary = str.split(''); // 配列形式に変換(後述のBlobで全要素出力)
    let blob = new Blob(ary,{type:"text/plan"}); // テキスト形式でBlob定義
    let link = document.createElement('a'); // HTMLのaタグを作成
    link.href = URL.createObjectURL(blob); // aタグのhref属性を作成
    link.download = 'test.txt'; // aタグのdownload属性を作成
    link.click(); // 定義したaタグをクリック(実行)
   }
   
   function buttonClick2(){
    // 読み込んだ文字列を表示
    document.getElementById("html").innerHTML = str2;
   }
      
  </script>
  <input type="button" value="ファイル出力" onclick="buttonClick();"/>
  <input type="button" value="ファイル入力" onclick="buttonClick2();"/>
  <p id="html"></p>
 </body>
</html>
 
・test2.js(テキストファイルを以下のようなjsファイルに変換するのが前提)
var str2 = "HelloWorld!<br>こんにちは世界!<br>";
 
【実行結果】
・test.htmlを開く

f:id:akira2kun:20201107200205j:plain

・ファイル出力ボタン押下
 以下のようなファイルが出力される。

f:id:akira2kun:20201107200224j:plain

・ファイル入力ボタン押下 

f:id:akira2kun:20201107200238j:plain