ブラウザ上でcsvやxlsx等のシートを読み込む

csvデータをアップロードするための入力方法を色々まとめてみる。

csvファイル

const chardet = require("chardet")
const iconv = require("iconv-lite")

var csvReader = new FileReader();
csvReader.onload = (e) => {
  let data = new Uint8Array(e.target.result);
  let encoding = chardet.detect(data);
  let csv = iconv.decode(data, encoding);
  document.getElementById("<text field>").value = csv;
};

document.getElementById("<file filed>").addEventListener("change", (e) => {
  let sheetFile = e.target.files[0];
  csvReader.readAsArrayBuffer(sheetFile);
});

chardetとiconv-liteを使うことで文字コードによらずに読み込めるようにしている。
ファイルが読み込まれたらFileReaderでバッファーとして読み込んで、それをcsvにしてテキストフィールドに入力する。

xlsxファイル

import XLSX from "xlsx"

var xlsxReader = new FileReader();
xlsxReader.onload = (e) => {
  let data = new Uint8Array(e.target.result);
  let workbook = XLSX.read(data, {type: "array"});
  let sheetName = document.getElementById("<text filed to input a sheet name>").value;
  let csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
  document.getElementById("<text field>").value = csv;
};

document.getElementById("<file filed>").addEventListener("change", (e) => {
  let sheetFile = e.target.files[0];
  xlsxReader.readAsArrayBuffer(sheetFile);
});
document.getElementById("<text filed to input a sheet name>").addEventListener("change", (e) => {
  let sheetFile = document.getElementById("<file filed>").files[0];
  xlsxReader.readAsArrayBuffer(sheetFile);
});

xlsxで読み込みと変換を行っている。上のcsvReaderと使い分けるならファイルのmimeタイプで分岐させる。xlsx, xlsm(マクロ入)はそれぞれ以下。

• application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
• application/vnd.ms-excel.sheet.macroEnabled.12

ただしエクセルをインストールしているとcsvのmimeタイプがapplication/vnd.ms-excelという2003年以前のエクセル(.xls)のものに変わってしまうので.xlsを入力する場合は注意。

Google スプレッドシート

import Axios from "axios"

document.getElementById("<text filed to input a sheet url>").addEventListener("change", (e) => {
  let spreadsheetId = /(?<=\/spreadsheets\/d\/).*?(?=\/)/.exec(e.target.value)[0]
  let sheetUrl = "https://docs.google.com/spreadsheets/d/" + spreadsheetId + "/export"

  Axios.get(sheetUrl, {params: {format: "csv"}}).then((res) => {
    document.getElementById("<text field>").value = res.data;
  }).catch((err) => {
    outputErrors(err);
  });
});

Googleスプレッドシートは
https://docs.google.com/spreadsheets/d/{spreadsheetId}/export?format={format}
でファイルをダウンロードできる。テキストフィールドには共有リンクを渡す。