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

49 lines
1.5 KiB
HTML
Raw Normal View History

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>