言わずと知れた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>