Vue.js excel to json

Question

i tried to read the excel files with vue.js but u can once i read the file the memory start to sky rocket like 5 gb ram and i the excel file is feairly small pls help need to convert the file to json The vue method to handle the excel file i tried all the type option i saw in the documintation but all send me diffrent errors I saw a similar question here but still could not solve this when tried

base64: "TypeError: input.replace is not a function"
binary: "TypeError: x.charCodeAt is not a function"
string: "TypeError: data.match is not a function"
array: is the one that cause the memory to get into 5gb

Also when tried to use the new file reader as present in the documentation when create the reader.onload the function never ran. the actual temeplate i tried two things. when i use the buffer it's seems to work but all the function return empty array. like the file is empty but it is not

both way did the same thing


    
    

displayFile: function (event) {
  // console.log(event.target.files[0])
  // const file = event.target.files[0]
  // const workbook = XLSX.read(file, {
  //   type: 'string'
  // })
  // console.log(workbook, workbook.SheetNames)

  // const res = XLSX.read(file)
  // console.log(res)
  // const res = XLSX.read(this.file)
  // console.log(res)
  console.log(this.file)
  this.file.text().then(text => {
    const fileType = this.file.type
    console.log(fileType)
    // this.PropceseMethod(this.file, fileType)
  })
  const reader = new FileReader()
  reader.onload = (data) => {
    console.log('HERE')
    console.log(data)
    const workbook = XLSX.read(data, {
      type: 'buffer'
    })
    console.log(workbook)
    workbook.SheetNames.forEach(function (sheetName) {
      console.log(sheetName)
      console.log(workbook.Sheets[sheetName])
      // Here is your object
      const XLRowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])
      console.log(XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]))
      console.log(XLRowObject)
      const jsonObject = JSON.stringify(XLRowObject)
      console.log(jsonObject)
    })
  }
  reader.onerror = function (ex) {
    console.log(ex)
  }
  reader.readAsText(this.file)
}

user_8988796 · Answer

to manage this i had to do change the way i am reading the file. When i used readAsBinaryString it's working, and pay using the type binary with this. This function is reading only the first sheet

fileToJson (e) {
  const file = e.target.files[0]
  /* Boilerplate to set up FileReader */
  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 })
    /* Update state */
    this.data = data
    const header = data.shift()
  }
  reader.readAsBinaryString(file)
}

user_10856516 · Answer

This code worked for me in a Vue CLI App:

// Important that import statement must get the full.min.js file only.
import XLSX from '../../../node_modules/xlsx/dist/xlsx.full.min.js'

var reader = new FileReader()
reader.onload = function (e) {
   var data = e.target.result
   var workbook = XLSX.read(data, { type: 'binary' })
   let sheetName = workbook.SheetNames[0]
   let worksheet = workbook.Sheets[sheetName]
   let rowObject = XLSX.utils.sheet_to_row_object_array(worksheet)
   const finalJsonData = JSON.stringify(rowObject, undefined, 4)
   console.log(finalJsonData)
}
reader.readAsBinaryString(this.excelFile)

With my final JSON Output as:

[
    {
        "email": "test5@test.com",
        "password": "password",
        "full_name": "Some Name 5",
        "mobile": 9897675463
    },
    {
        "email": "test6@test.com",
        "password": "password",
        "full_name": "Some Name 6",
        "mobile": 9897675463
    },
    ...
    ...
]

And my Excel file as:

Vue.js excel to json

2 Answers