upload and process excel file in vue

Question

Am trying to upload an xlsx excel file and process it in my Vue app. But it's failing, throwing an error. Which makes me think that I'm not using or importing the library correctly since in a node projects works fine.

Am using the xlsx library.

Code

template

<template>
  <div id="app">
    <input type="file" @change="onChange" />
  </div>
</template>

script

import XLSX from "xlsx"

export default {
  name: "App",
  methods: {
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      let workbook = XLSX.readFile(this.file);
      console.log('workbook1');
      console.log(workbook);
      console.log('SheetNames');
      console.log(workbook.SheetNames);
    },
  }
};

At this point even being pointed to the a correct library if there is one would be very appreciated. Thanks in advance.

This is my codesandbox of the problem:

https://codesandbox.io/s/nervous-montalcini-w3qhy?file=/src/App.vue

wobsoriano · Accepted Answer · 2023-05-02 17:00:18Z

7

You need to set up a FileReader first then read the file as a binary string so you can pass it to XLSX.

export default {
  methods: {
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      if (this.file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          /* Parse data */
          const bstr = e.target.result;
          const wb = XLSX.read(bstr, { type: 'binary' });
          /* Get first worksheet */
          const wsname = wb.SheetNames[0];
          const ws = wb.Sheets[wsname];
          /* Convert array of arrays */
          const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
        }

        reader.readAsBinaryString(this.file);
      }
    },
  }
};

edited May 2, 2023 at 17:00

answered Dec 13, 2020 at 16:15

wobsoriano

13.5k25 gold badges106 silver badges179 bronze badges

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

Comments

jogarcia · Accepted Answer · 2021-05-20 07:16:03Z

3

I did it through read-excel-file npm package. Here is my code.

<template>
...
<input type="file" @change="onFileChange" />
...
</template>
import readXlsxFile from 'read-excel-file'
export default {
...
methods: {
  onFileChange(event) {
    let xlsxfile = event.target.files ? event.target.files[0] : null;
    readXlsxFile(xlsxfile).then((rows) => {
      console.log("rows:", rows)
    })
  }
}

edited May 20, 2021 at 7:16

jogarcia

2,8512 gold badges26 silver badges47 bronze badges

answered Dec 27, 2020 at 14:09

Wise Invoker

414 bronze badges

Comments

Shiva Pal · Accepted Answer · 2022-11-07 09:20:14Z

2

import it ->

import * as XLSX from "xlsx";

answered Nov 7, 2022 at 9:20

Shiva Pal

212 bronze badges

3 Comments

jogarcia Over a year ago

You may want to ellaborate on that answer

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

kodahScripts Over a year ago

This answer did it for me. I changed the way i was importing to this and good to go! Thanks!

mai elrefaey · Accepted Answer · 2020-04-26 10:34:14Z

0

NODE ONLY! Attempts to read filename and parse ! you can use another library of vuejs

answered Apr 26, 2020 at 10:34

mai elrefaey

3921 gold badge3 silver badges10 bronze badges

1 Comment

wobsoriano Over a year ago

Not really stackoverflow.com/a/65277787/4698790

Collectives™ on Stack Overflow

upload and process excel file in vue

Code

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related