2022-10-19 10:05:59 +00:00
|
|
|
<!DOCTYPE html>
|
2022-10-20 18:47:20 +00:00
|
|
|
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
|
2022-10-19 10:05:59 +00:00
|
|
|
<!-- vim: set ts=2: -->
|
|
|
|
|
<html lang="en" style="height: 100%">
|
2024-04-26 04:16:13 +00:00
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
<meta name="robots" content="noindex">
|
|
|
|
|
<title>SheetJS x Vue ESM</title>
|
|
|
|
|
</head>
|
2022-10-19 10:05:59 +00:00
|
|
|
<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 */
|
2024-04-26 04:16:13 +00:00
|
|
|
const workbook = read(await (await fetch("https://docs.sheetjs.com/pres.numbers")).arrayBuffer());
|
2022-10-19 10:05:59 +00:00
|
|
|
/* 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>
|
