<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
header{ text-align:center;}
.wrap { width:calc(70% + 320px); margin:0 auto; line-height:1.6; display:flex; }
#bxleft{flex-basis:320px; background:#eff; padding:8px;}
#tablein { overflow: auto; padding:4px; }
#tablein { border-collapse: collapse; margin:0 auto; background: #fff; }
#tablein td { font-size: 12px; padding: .2em .5em; border: solid 1px #ccc; text-align:center; }
#tablein tr:first-child { background: #dfd; }
#download { background:#eee; margin-bottom:5px; padding:0px 8px; border:#333 1px solid; }
#bxright{ flex:3;height:500px; overflow:auto; background:#efe;}
</style>
<script>
let Elmnt = ""; // 表示する要素列
function init(){ // csv の読込設定
var file = document.querySelector('#getfile');
file.onchange = function (){ // input 変化時に読み込む
var fileList = file.files;
var reader = new FileReader();
reader.readAsText(fileList[0]);
reader.onload = function () { //読み込み後表示
csv_array(reader.result); //csv_arrayの関数を実行 +++++++++++++
};
};
}; // init() ----------------
function csv_array(data) { // 読込ファイルをテーブル表示
const dataArray = []; // 配列を用意
const dataString = data.split('\r\n'); // 改行で分割
for (let i = 0; i < dataString.length; i++) {
dataArray[i] = dataString[i].split(',');
}
let insertElement = ''; //テーブルタグ表示用の変数
dataArray.forEach((element) => { //配列の中身を表示
insertElement += '<tr>';
for( i=0; i<element.length; i++){
insertElement += '<td>' + element[i] + '</td>';
if( i==0 ){ Elmnt += element[i];
} else { Elmnt += ',' + element[i]; }
}
insertElement += '</tr>';
Elmnt += '\n';
});
let output_csv = document.getElementById('tablein');
output_csv.innerHTML = insertElement; // 表示
};// csv_array(data) ----------------
function handleDownload() { // CSV出力＆ダウンロード ------------
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); //文字コードをBOM付きUTF-8に指定
var table = document.getElementById('tablein'); //id=tableinという要素を取得
var data_csv=""; //ここに文字データとして値を格納していく
for(var i = 0; i < table.rows.length; i++) {
for(var j = 0; j < table.rows[i].cells.length; j++) {
data_csv += table.rows[i].cells[j].innerText; //HTML中の表のセル値をdata_csvに格納
if(j == table.rows[i].cells.length-1){ // 最終行末を除外
if( i != table.rows.length -1) {data_csv += "\r\n"; } //行終わりに改行コードを追加 \r
} else { data_csv += ","; } //セル値の区切り文字として,を追加
}
}
var blob = new Blob([ bom, data_csv], { "type" : "text/csv" }); //data_csv をダウンロードする関数
if (window.navigator.msSaveBlob) { //IEの場合の処理
window.navigator.msSaveBlob(blob, "test.csv");
window.navigator.msSaveOrOpenBlob(blob, "test.csv");// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
delete data_csv; //data_csvオブジェクトはもういらないので消去してメモリを開放
}; // handleDownload() -------------------
</script>
</head>
<body onload="init()">
<header>
<h3>csv 読込 → 編集 → 保存</h3>
</header>
<section class="wrap">
<article id="bxleft">
【***.csv を読込む】<br>
<input type="file" id="getfile" accept="text/*" ><br><br>
(右表は直接編集します)<br>
<a id="download" href="" download="download.csv" onclick="handleDownload()">csv 保存</a>
【ファイル名: download.csv】
</article>
<article id="bxright">
<table id="tablein" contenteditable="true"></table>
</article>
</section>
</body>
</html>
