仅使用javascript和html读取csv或excel(xlsx)文件? [英] Read a csv or excel (xlsx) file with just javascript and html?

问题描述

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

Is it possible to read a excel xlsx or csv, preferably xlsx, using just JavaScript and html. All the solutions (sheetsJS, d3{d3 uses the Fetch API}) I have found require a webserver. I understand I can get a simple webserver using web server for chrome or python or node.js. Futhermore, I understand I can run chrome with certain flags, but I would like to not do this because of security concerns. I am building a demo for someone who is not web savvy and would like to avoid doing this.

我的文件结构非常简单:

my file structure is very simple :

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

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

I simply need to read the xlsx and then display that data in html page.

推荐答案

我添加了一个简单的示例，该示例接受Excel或CSV文件(当前示例仅接受一个文件)，并使用

I've added a simple example that accepts Excel or CSV files (current example accepts a single file), uses the SheetJS library to parse the Excel file type, convert the data to JSON and logs the contents to the console.

这足以完成您的演示.希望这会有所帮助！

This should be more than enough to complete your demo. Hope this helps!

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">

这篇关于仅使用javascript和html读取csv或excel(xlsx)文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！