仅使用 javascript 和 html 读取 csv 或 excel (xlsx) 文件？

Question

是否可以仅使用 JavaScript 和 html 读取 excel xlsx 或 csv，最好是 xlsx。我发现的所有解决方案（sheetsJS、d3{d3 使用 Fetch API}）都需要一个网络服务器。我知道我可以使用 chrome 或 python 或 node.js 的网络服务器获得一个简单的网络服务器。此外，我知道我可以使用某些标志运行 chrome，但出于安全考虑，我不想这样做。我正在为不精通网络的人构建一个演示，并希望避免这样做。

我的文件结构非常简单：

TestFolder
| index.html
| js/
    | test.js
| data/
    | test.xlsx
| css/
    | test.css

我只需要读取 xlsx，然后在 html 页面中显示该数据。

Answer 1

我添加了一个接受 Excel 或 CSV 文件的简单示例（当前示例接受单个文件），使用SheetJS库来解析 Excel 文件类型，将数据转换为 JSON 并将内容记录到控制台。

这应该足以完成您的演示。希望这可以帮助！

var file = document.getElementById('docpicker')
var viewer = document.getElementById('dataviewer')
file.addEventListener('change', importFile);

function importFile(evt) {
  var f = evt.target.files[0];

  if (f) {
    var r = new FileReader();
    r.onload = e => {
      var contents = processExcel(e.target.result);
      console.log(contents)
    }
    r.readAsBinaryString(f);
  } else {
    console.log("Failed to load file");
  }
}

function processExcel(data) {
  var workbook = XLSX.read(data, {
    type: 'binary'
  });

  var firstSheet = workbook.SheetNames[0];
  var data = to_json(workbook);
  return data
};

function to_json(workbook) {
  var result = {};
  workbook.SheetNames.forEach(function(sheetName) {
    var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {
      header: 1
    });
    if (roa.length) result[sheetName] = roa;
  });
  return JSON.stringify(result, 2, 2);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<label for="avatar">Choose an Excel or CSV file:</label>
<input type="file" id="docpicker" accept=".csv,application/vnd.ms-excel,.xlt,application/vnd.ms-excel,.xla,application/vnd.ms-excel,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xltx,application/vnd.openxmlformats-officedocument.spreadsheetml.template,.xlsm,application/vnd.ms-excel.sheet.macroEnabled.12,.xltm,application/vnd.ms-excel.template.macroEnabled.12,.xlam,application/vnd.ms-excel.addin.macroEnabled.12,.xlsb,application/vnd.ms-excel.sheet.binary.macroEnabled.12">

<div id="dataviewer">