1

Amigos, estoy intantando crear un loading..., el problema es que al usar la librería de vue-xlsx-table el método es casi cerrado ya que solo puedes acceder una vez que el archivo se haya subido y procesado completamente.

<template>
  <div id="app">
    <h1>vue-xlsx-table</h1>
    <vue-xlsx-table @on-select-file="handleSelectedFile"></vue-xlsx-table>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    handleSelectedFile (convertedData) {
      // Insert Loading
      console.log(convertedData)
    }
  }
}
</script>

¿Alguien usó con anterioridad esta librería para convertir formatos xlsx (excel) en JSON?

1
  • No parece haber nada de documentacion en ese componente. Es el unico que existe? ademas hace un año que no se actualiza para nada. Tal vez podrias abrirlo y hacer las cosas que necesitas vos mismo?
    – gbianchi
    Commented el 27 mar. 2019 a las 14:06

1 respuesta 1

1
+100

Parece que no están manteniendo el código desde hace mas de 2 años, pero puedes resolver el problema de 2 formas, la primera y mas "intrusiva" es la de traerte su componente y modificarlo y la segunda es con un componente asíncrono. La segunda opción sería algo así:

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

Para que veas una solución implementada he creado un sandbox con la primera opción:

Verás que hay una carpeta con el componente importado vue-xlsx-table. Dentro he modificado vue-xlsx-table.vue para que tenga una variable loading y gestionar su estado en el template:

<!--  Añado la variable loading para gestionar cuando está cargando -->
    <button type="button" class="xlsx-button" @click="handleUploadBtnClick" :disabled="loading">
      <span v-if="loading">Loading</span>
      <span v-if="!loading">
        <slot></slot>
      </span>
    </button>

y en el método de manejo del fichero:

handleFileChange(e) {
  console.log("handling");
  if (this.rawFile !== null) {
    return;
  }
  this.loading = true;// incializo loading 
  this.rawFile = e.target.files[0];
  this.fileConvertToWorkbook(this.rawFile)
    .then(workbook => {
      let xlsxArr = XLSX.utils.sheet_to_json(
        workbook.Sheets[workbook.SheetNames[0]]
      );
      this.workbook = workbook;
      this.initTable(this.xlsxArrToTableArr(xlsxArr));
    })
    .catch(err => {
      console.error(err);
    })
    .finally(fin => { // finally para reiniciar loading 
      console.log("end");
      this.loading = false;
    });
},
2
  • Funciona de maravilla, gracias estimado Francisco. Commented el 28 mar. 2019 a las 20:20
  • Genial! Me alegro de que te haya servido. Commented el 28 mar. 2019 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.