cscan / vue3-excel-editor

Vue3 plugin for displaying and editing the array-of-object in Excel style.
MIT License
231 stars 51 forks source link

How to upload and read file? #30

Closed onigetoc closed 7 months ago

onigetoc commented 8 months ago

with XLSX we can read uploaded file but i can't reproduce it.

Usually we find this on the web:

Inside the Template vue

<label>Files
  <!-- <input type="file" id="files" ref="files" multiple onChange={this.handleChange} /> -->
  <input type="file" @change="onChange" />
</label>
<div v-for="(file, key) in files" class="file-listing">{{ file.name }} <span class="remove-file" v-on:click="removeFile( key )">Remove</span></div>
    <button v-on:click="addFiles()">Add Files</button>
// import XLSX from 'xlsx';  // will make a error
// Changed for:
import { read, utils, writeFile } from 'xlsx';
// but XLSX is still undefined

// and something like that with vue:
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      alert(this.file)
      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);
      }
    },

- NO 2:
If we uploaded a file with success, 
automatically load the hosted file when reloading the web page.

but if i remove the import XLSX from 'xlsx'; we obiously get: Uncaught ReferenceError: XLSX is not defined. I can i load, write and read the excel file?

cscan commented 7 months ago

You could refer to importFile function in VueExcelEditor.vue