言わずと知れたCSVファイルを、EXCEL等で出力されるシフトJIS形式の状態で読み込めるJavaScriptコードを書いてみます。

実行条件

入力対象となるCSVはソフトJIS形式である。例えば郵便局の郵便番号データを加工無しで読めるようにする。
フレームワークは用いずVanillaJSで書く。
なるべくシンプルなコードとし装飾も最低限にする。

対象コード

シフトJIS形式によるテキストファイルを読み込む場合、問題になるのは 実際のHTML上で使用されているキャラクターコードとの相違をどうするか？ ということです。下記コードにおいては、encoding.jsにより解決しています。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"></script>
</head>
<body>
	<style>
		table{
			border-left:1px solid #000000;
			border-top:1px solid #000000;
			border-spacing:0;
		}

		table td{
			border-right:1px solid #000000;
			border-bottom:1px solid #000000;
		}
	</style>

	<input type="file" id="csvfile"><br>	<!-- ファイル選択 -->
	<table id="output"></table>				<!-- 出力先 -->

	<script>
		"use strict";

		// ファイルが選択された時
		document.getElementById('csvfile').onchange = e=>{
			const reader = new FileReader();

			// 読込後の処理
			reader.onload = file=>{
				// Shift-JISで読まれたテキストをUNICODE文字列に変換
				const arr = new Uint8Array(file.target.result);
				const text = Encoding.convert(arr,{
					to:"UNICODE",
					from:Encoding.detect(arr),
					type:"string"
				});

				// table要素を取得
				const output = document.getElementById('output');

				// 文字列を1行ずつ処理
				const rows = text.split('\n');
				for(let i = 0;i < rows.length;i++){
					// tr要素作成
					const element = document.createElement("tr");

					// 1行をカンマ分割して1個ずつtd要素で追加
					const cells = rows[i].split(',');
					cells.forEach(cell=>{
						const td = document.createElement("td");
						td.textContent = cell.replaceAll('"','');	// "を除去して設定(手抜き)
						element.appendChild(td);
					});

					// tr要素をtableへ追加
					output.appendChild(element);
				}
			}

			// 選択されたファイルを読む
			reader.readAsArrayBuffer(e.target.files[0]);
		}
	</script>
</body>
</html>

CSVファイルをFileAPIで読み込む

実行条件

対象コード