仅使用 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">

Answer 2

您可以尝试使用Fetch API 下载文件并使用 JavaScript 处理它。

fetch('data/test.xlsx').then(function(resp) {
  // Process the data here...
  console.log('Data Response: ', resp);
});

如果您的数据文件是 JSON 格式，使用起来会容易得多，但这可能会满足您的需求。

更新 - 数据为 JSON 格式时的示例

fetch('data/test.xlsx').then(function(resp) {
  var records = resp.json(); // Assuming that we receive a JSON array.

  console.log('Records: ', records.length);

  records.forEach(function(record){
    console.log('Record Name: ', record.name); // Assuming each record has a name property
  });
});

Answer 3

这是我最终的做法：

我收到readAsBinaryString 的错误，所以我用下面的内容出去了。我注意到sheet_to_json 不能与csv 一起工作，所以我首先运行它并检查结果并解析sheet_to_csv 如果sheet_to_json === 0。

HTML：

<!-- SheetsJS CSV & XLSX -->
<script src="xlsx/xlsx.full.min.js"></script>
<!-- SheetsJS CSV & XLSX -->
<!-- CSV/XLSX -->
<div class="ms-font-xl ms-settings__content__subtitle">CSV/XLSX Upload:</div>
<input type="file" id="csv-xlsx-file" 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">
<!-- CSV/XLSX -->

JS：

var csv_file_elm = document.getElementById("csv-xlsx-file")
csv_file_elm.addEventListener('change', CSV_XLSX_File_Selected_Event)

async function CSV_XLSX_File_Selected_Event() {
    var id = this.id
    var inputElement = document.getElementById(id)
    let ext = inputElement.value
    ext = ext.split(".")
    ext = ext[ext.length - 1]
    var files = inputElement.files || [];
    if (!files.length) return;
    var file = files[0];
    var reader = new FileReader();
    reader.onloadend = async function (event) {
        var arrayBuffer = reader.result;
        var options = { type: 'array' };
        var workbook = XLSX.read(arrayBuffer, options);
        //console.timeEnd();

        var sheetName = workbook.SheetNames
        var sheet = workbook.Sheets[sheetName]
        var sheet_to_html = XLSX.utils.sheet_to_html(sheet)
        var sheet_to_json = XLSX.utils.sheet_to_json(sheet)

        if (sheet_to_json.length === 0) {
            var sheet_to_csv = [XLSX.utils.sheet_to_csv(sheet)]
            var results = sheet_to_csv
        }

        if (sheet_to_json.length > 0) {
            var results = sheet_to_json
        }

        let Parsed_File_Obj = {
            "sheet_to_html": sheet_to_html,
            "results": results,
            "ext": ext,
        }

        console.log('Parsed_File_Obj')
        console.log(Parsed_File_Obj)
    };
    reader.readAsArrayBuffer(file);
}