2022年9月10日土曜日

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

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

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


  1. let loaded_csv = []; //ファイル読み込み用のグローバルオブジェクト
  2. function load(e){
  3. for (let file of e.target.files){
  4. let reader = new FileReader();
  5. reader.onload = event => {
  6. let csv = event.target.result.trim(/\r\n/).split(/\r\n/);
  7. csv = csv.map( x => x.split(','));
  8. loaded_csv.push(csv);
  9. }
  10. reader.readAsText(file);
  11. }
  12. }
  13. function create(write_array, filename){
  14. let csv_string = "";
  15. for (let i of write_array){
  16. csv_string += i.join(',');
  17. csv_string += '\r\n';
  18. }
  19. let b = new Blob([csv_string], {type: "text/csv"});
  20. let url_link = URL.createObjectURL(b);
  21. let link = document.createElement("a");
  22. link.download = filename;
  23. link.href = url_link;
  24. document.body.appendChild(link);
  25. link.click();
  26. }