2022年9月10日土曜日

File APIを用いたCSVファイルの入出力

VBAを使いたくないので、HTML+JavaScriptでCSVファイルを処理したいものの、File APIに関する記述がそこら中に散らばっていて、入出力をまとめた記事がないので今回作成してみた。

ファイルオブジェクトの読み書きに関してはPromiseとイベント駆動のものがあるが、今回は、わかりやすいのでイベント駆動のものを採用した。
EventListenerのコールバック関数に引数を与えるのはどうもうまくいかなかったので、グローバルオブジェクトにファイルの内容をロードする形にして読み込み→グローバルオブジェクトで読み書きとした。


    
let loaded_csv = []; //ファイル読み込み用のグローバルオブジェクト
function load(e){
	for (let file of e.target.files){
    	let reader = new FileReader();
        reader.onload = event => {
        	let csv = event.target.result.trim(/\r\n/).split(/\r\n/);
            csv = csv.map( x => x.split(','));
            loaded_csv.push(csv);
            }
            reader.readAsText(file);
        }
}

function create(write_array, filename){
	let csv_string = "";
    for (let i of write_array){
    	csv_string += i.join(',');
        csv_string += '\r\n';
    	}
	let b = new Blob([csv_string], {type: "text/csv"});
    let url_link = URL.createObjectURL(b);
    let link = document.createElement("a");
    link.download = filename;
    link.href = url_link;
    document.body.appendChild(link);
    link.click();
}