This commit is contained in:
SheetJS 2022-08-25 17:28:31 -04:00
parent eb096bf09c
commit 33778a63bb

@ -537,7 +537,7 @@ function wbLoader(path) {
name: n,
data: utils.sheet_to_json(wb.Sheets[n])
}));
return { data: res };
return { content: res };
}
const site = lume();
@ -556,7 +556,7 @@ worksheets and the data rows. The example assumes each worksheet has a `name` an
```jsx title="index.jsx"
export default ({sheetjs}) => {
return (<>{(sheetjs.data).map(sheet => (<>
return (<>{(sheetjs).map(sheet => (<>
<h2>{sheet.name}</h2>
<table><thead><th>Name</th><th>Index</th></thead>
<tbody>{sheet.data.map(row => (<tr>
@ -567,3 +567,111 @@ export default ({sheetjs}) => {
</>))}</>);
};
```
### Lume Demo
<details><summary><b>Complete Example</b> (click to show)</summary>
:::note
This was tested against `lume v1.10.4` on 2022 August 25.
:::
1) Create a stock site:
```bash
mkdir sheetjs-lume
cd sheetjs-lume
deno run -A https://deno.land/x/lume/init.ts
```
When prompted, enter the following options:
- `Use TypeScript for the configuration file`: press Enter (use default `N`)
- `Do you want to use plugins`: type `jsx` and press Enter
The project will be configured and modules will be installed.
2) Make the following highlighted changes to `_config.js`:
```js title="_config.js"
import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";
// highlight-start
import { readFile, utils } from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
function wbLoader(path) {
const wb = readFile(path);
const res = wb.SheetNames.map(n => ({
name: n,
data: utils.sheet_to_json(wb.Sheets[n])
}));
return { content: res };
}
// highlight-end
const site = lume();
site.use(jsx());
// highlight-start
const exts = [".xlsx", ".numbers", /* ... other supported extensions */];
site.loadData(exts, wbLoader);
// highlight-end
export default site;
```
This instructs Lume to watch for and load `.xlsx` and `.numbers` spreadsheets
3) Download <https://sheetjs.com/pres.numbers> and place in a `_data` folder:
```bash
mkdir _data
curl -LO https://sheetjs.com/pres.numbers
mv pres.numbers _data
```
4) Create a `index.jsx` file that references the file. Since the file is
`pres.numbers`, the parameter name is `pres`:
```jsx title="index.jsx"
export default ({pres}) => {
return (<>{(pres).map(sheet => (<>
<h2>{sheet.name}</h2>
<table><thead><th>Name</th><th>Index</th></thead>
<tbody>{sheet.data.map(row => (<tr>
<td>{row.Name}</td>
<td>{row.Index}</td>
</tr>))}</tbody>
</table>
</>))}</>);
};
```
5) Run the development server:
```bash
deno task lume --serve
```
To verify it works, access http://localhost:3000 from your web browser.
Adding a new row and saving `pres.numbers` should refresh the data
6) Stop the server (press `CTRL+C` in the terminal window) and run
```bash
deno task lume
```
This will create a static site in the `_site` folder, which can be served with:
```bash
npx http-server _serve
```
Accessing the page http://localhost:8080 will show the page contents.
</details>