JavaScriptでブラウザからローカルテキストファイルを読み取る方法

JavaScriptをブラウザから使用する場合、セキュリティによりローカルへのテキストファイルへのアクセスは制限されています。
その制約の中で、下記の方法を使用すれば、ローカルのテキストファイルへの入出力が可能になります。

・入力

テキストファイルをJavaSctipt形式に変換し、変数として読み込む。

・出力

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＞

＜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＞";

1	var str2 = "HelloWorld!＜br＞こんにちは世界！＜br＞";

【実行結果】

・test.htmlを開く

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

以下のようなファイルが出力される。

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

いかがでしたでしょうか。

ブラウザからローカルのテキストファイルへのアクセスが制限されているのは、インターネットを使う分にはありがたいことなのですが、ローカルでスタンドアローンな画面を使っている場合には逆に困ってしまいます。
そのような場合に、今回紹介したようなテクニックが使えるかもしれません。