<!DOCTYPE html>
<!-- sheetjs (C) 2013-present  SheetJS https://sheetjs.com -->
<!-- vim: set ts=2: -->
<html lang="en" style="height: 100%">
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<script type="importmap">{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
    "xlsx": "https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs"
  }
}</script>
<div id="root"></div>

<script type="module">
import { createApp, reactive } from 'vue';
import { read, utils } from 'xlsx';

const S5SComponent = {
  mounted() { (async() => {
    /* fetch and parse workbook -- see the fetch example for details */
    const workbook = read(await (await fetch("https://sheetjs.com/pres.numbers")).arrayBuffer());
    /* loop through the worksheet names in order */
    workbook.SheetNames.forEach(name => {
      /* generate HTML from the corresponding worksheets */
      const html = utils.sheet_to_html(workbook.Sheets[name]);
      /* add to state */
      this.wb.wb.push({ name, html });
    });
  })(); },
  /* this state mantra is required for array updates to work */
  setup() { return { wb: reactive({ wb: [] }) }; },
  template: `
  <div v-for="ws in wb.wb" :key="ws.name">
    <h3>{{ ws.name }}</h3>
    <div v-html="ws.html"></div>
  </div>`
};

createApp(S5SComponent).mount('#root');
</script>
</body>
</html>