How upload data from an excel file to an array using HTML and JS

Question

I trying create button in page and with (kind OpenFileDialog ) select file excel. Parse this file. Find my question, but dont work. Reading excel file into array using javascript

$("#fileInput").on("change", function(e) {
  var file = e.target.files[0];
  // input canceled, return
  if (!file) return;
  var FR = new FileReader();
  FR.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {
      type: 'array'
    });
    var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    // header: 1 instructs xlsx to create an 'array of arrays'
    var result = XLSX.utils.sheet_to_json(firstSheet, {
      header: 1
    });
    // data preview
    var output = document.getElementById('result');
    output.innerHTML = JSON.stringify(result, null, 2);
  };
  FR.readAsArrayBuffer(file);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="fileInput" value="Choose Files!" accept=".xls, .xlsx" />
<!--расширение файла -->
<pre id="result"></pre>

Brian Fernandez · Accepted Answer · 2022-10-09 17:04:31Z

1

You can use an arrayBuffer, the File object inherits the arrayBuffer() method from Blob, the following works (you just need to adapt it to jQuery a bit):

<input type="file" id="fileInput" value="Choose Files!" accept=".xls, .xlsx" />

<pre id="result"></pre>

<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.12/package/dist/xlsx.full.min.js"></script>

const $ = selector => document.querySelector(selector)

const input = $('#fileInput')

input.addEventListener('change', async (e) => {
  const file = e.target.files[0]

  if (!file) return

  const data = await file.arrayBuffer()

  const wb = XLSX.read(data)
  const ws = wb.Sheets[wb.SheetNames[0]]
  const result = XLSX.utils.sheet_to_json(ws, {
    header: 1
  })

  $('#result').innerHTML = JSON.stringify(result, null, 2)
})

Preview:
preview

Demo in codi.link

edited Oct 9, 2022 at 17:04

answered Oct 9, 2022 at 16:50

Brian Fernandez

3182 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

profpow Over a year ago

TY very much! If you don't mind, you can comment on the lines

Collectives™ on Stack Overflow

How upload data from an excel file to an array using HTML and JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related