Preview an XLSX file in Vue

npm install eatsheet

<script setup>
import { ref, watchEffect } from 'vue';
import { openWorkbook } from 'eatsheet/worker';
import 'eatsheet/eatsheet.css';

const props = defineProps(['file']);
const box = ref(null);
const error = ref(null);

watchEffect(onCleanup => {
  const file = props.file;
  const element = box.value;
  if (!file || !element) return;

  let book, gone = false, frame = 0;
  error.value = null;

  const draw = async () => {
    const { html } = await book.render(0, { offset: element.scrollTop });
    if (!gone) element.innerHTML = html; // EatSheet escapes cell content
  };
  const onScroll = () => {
    cancelAnimationFrame(frame);
    frame = requestAnimationFrame(() => draw().catch(failure => (error.value = failure)));
  };

  openWorkbook(file).then(opened => {
    if (gone) return opened.close();
    book = opened;
    element.addEventListener('scroll', onScroll);
    return draw();
  }).catch(failure => { if (!gone) error.value = failure; });

  onCleanup(() => {
    gone = true;
    cancelAnimationFrame(frame);
    element.removeEventListener('scroll', onScroll);
    book?.close();
  });
});
</script>

<template>
  <p v-if="error" role="alert">Couldn't open this file: {{ error.code ?? error.message }}</p>
  <div v-show="!error" ref="box" tabindex="0" style="height: 480px; overflow: auto"></div>
</template>

<script setup>
import { ref } from 'vue';
import ExcelPreview from './ExcelPreview.vue';

const file = ref(null);
</script>

<template>
  <input type="file" accept=".xlsx,.csv,.tsv" @change="file = $event.target.files[0]">
  <ExcelPreview v-if="file" :file="file" />
</template>