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

Question

是否可以仅使用 JavaScript 和 html 读取 Excel xlsx 或 csv，最好是 xlsx。我发现的所有解决方案(sheetsJS、d3{d3 使用 Fetch API})都需要网络服务器。我知道我可以使用 Chrome、Python 或 Node.js 的 Web 服务器获得一个简单的 Web 服务器。此外，我知道我可以使用某些标志运行 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">