<!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>