docs.sheetjs.com/docz/static/vue/fetch.html

49 lines
1.5 KiB
HTML

<!DOCTYPE html>
<!-- sheetjs (C) 2013-present SheetJS https://sheetjs.com -->
<!-- vim: set ts=2: -->
<html lang="en" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex">
<title>SheetJS x Vue ESM</title>
</head>
<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://docs.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>