128 lines
3.5 KiB
Bash
Executable File
128 lines
3.5 KiB
Bash
Executable File
#!/bin/bash
|
|
# https://docs.sheetjs.com/docs/demos/frontend/svelte
|
|
# NOTE: the svelte scripts explicitly attach id="xport" to the buttons
|
|
cd /tmp
|
|
rm -rf sheetjs-fe-svelte
|
|
mkdir sheetjs-fe-svelte
|
|
cd sheetjs-fe-svelte
|
|
|
|
rm -rf sheetjs-svelte
|
|
npm create -y vite@latest sheetjs-svelte -- --template svelte-ts --no-rolldown --no-interactive
|
|
cd sheetjs-svelte
|
|
npm i
|
|
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
|
|
npm i --save puppeteer express@4
|
|
|
|
cat >test.cjs <<EOF
|
|
const puppeteer = require('puppeteer');
|
|
const express = require('express');
|
|
const app = express();
|
|
app.use(express.static('./dist/'));
|
|
app.listen(7262, async() => {
|
|
await new Promise((res,rej) => setTimeout(res, 1000));
|
|
const browser = await puppeteer.launch();
|
|
const page = await browser.newPage();
|
|
page.on("console", msg => console.log("PAGE LOG:", msg.text()));
|
|
await page.setViewport({width: 1920, height: 1080});
|
|
const client = await page.target().createCDPSession();
|
|
await client.send('Browser.setDownloadBehavior', {
|
|
behavior: 'allow',
|
|
downloadPath: require("path").resolve('./')
|
|
});
|
|
page.on('request', req => console.log(req.url()));
|
|
await page.goto('http://localhost:7262/');
|
|
await new Promise((res,rej) => setTimeout(res, 1000));
|
|
await page.click("#xport");
|
|
await new Promise((res,rej) => setTimeout(res, 1000));
|
|
await browser.close();
|
|
process.exit();
|
|
});
|
|
EOF
|
|
|
|
# Array of Objects
|
|
|
|
cat >src/App.svelte <<EOF
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { read, utils, writeFileXLSX } from 'xlsx';
|
|
|
|
/* the component state is an array of presidents */
|
|
let pres = [];
|
|
|
|
/* Fetch and update the state once */
|
|
onMount(async() => {
|
|
const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
|
|
const wb = read(f); // parse the array buffer
|
|
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
|
|
pres = utils.sheet_to_json(ws); // generate objects and update state
|
|
});
|
|
|
|
/* get state data and export to XLSX */
|
|
function exportFile() {
|
|
const ws = utils.json_to_sheet(pres);
|
|
const wb = utils.book_new();
|
|
utils.book_append_sheet(wb, ws, "Data");
|
|
writeFileXLSX(wb, "SheetJSSvelteAoO.xlsx");
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
|
|
{#each pres as p}<tr>
|
|
<td>{p.Name}</td>
|
|
<td>{p.Index}</td>
|
|
</tr>{/each}
|
|
</tbody><tfoot><tr><td colSpan={2}>
|
|
<button id="xport" on:click={exportFile}>Export XLSX</button>
|
|
</td></tr></tfoot></table>
|
|
</main>
|
|
EOF
|
|
|
|
npm run build
|
|
|
|
node test.cjs
|
|
npx -y xlsx-cli SheetJSSvelteAoO.xlsx
|
|
|
|
# HTML
|
|
|
|
cat >src/App.svelte <<EOF
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { read, utils, writeFileXLSX } from 'xlsx';
|
|
|
|
let html = "";
|
|
let tbl;
|
|
|
|
/* Fetch and update the state once */
|
|
onMount(async() => {
|
|
const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
|
|
const wb = read(f); // parse the array buffer
|
|
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
|
|
// highlight-start
|
|
html = utils.sheet_to_html(ws); // generate HTML and update state
|
|
// highlight-end
|
|
});
|
|
|
|
/* get state data and export to XLSX */
|
|
function exportFile() {
|
|
// highlight-start
|
|
const elt = tbl.getElementsByTagName("TABLE")[0];
|
|
const wb = utils.table_to_book(elt);
|
|
// highlight-end
|
|
writeFileXLSX(wb, "SheetJSSvelteHTML.xlsx");
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<button id="xport" on:click={exportFile}>Export XLSX</button>
|
|
<!-- highlight-start -->
|
|
<div bind:this={tbl}>{@html html}</div>
|
|
<!-- highlight-end -->
|
|
</main>
|
|
EOF
|
|
|
|
npm run build
|
|
|
|
node test.cjs
|
|
npx -y xlsx-cli SheetJSSvelteHTML.xlsx
|