docs.sheetjs.com/11-svelte.md at e3d16d810891fbc77242d4bb51d4f5c2b43fdc42

LankyMoose/docs.sheetjs.com

2023-12-04 22:47:13 -05:00

10 KiB

Raw Blame History

title	sidebar_label	description	pagination_prev	pagination_next
Supercharge SvelteKit Apps with Spreadsheets	SvelteKit	Make static websites from spreadsheets using SvelteKit. Seamlessly integrate data into your website using SheetJS. Rapidly develop web apps powered by data in Excel.	demos/net/index	demos/mobile/index

import current from '/version.js'; import CodeBlock from '@theme/CodeBlock';

SvelteKit is a framework for generating static sites. It leverages modern technologies including ViteJS and SvelteJS¹

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses SvelteKit and SheetJS to pull data from a spreadsheet and display the content in an HTML table. We'll explore how to use a plugin to pull raw data from files and how to organize page scripts to process the files at compile time.

The "Complete Example" section includes a complete website powered by an XLSX spreadsheet.

:::info pass

This demo focuses on server-side processing with SvelteKit and Svelte.

The Svelte demo covers general client-side usage.

:::

The following diagram depicts the workbook waltz:

flowchart LR
  file[(workbook\nfile)]
  subgraph SheetJS operations
    base64(base64\nstring)
    aoo(array of\nobjects)
  end
  html{{HTML\nTABLE}}
  file --> |vite.config.js\ndata loader| base64
  base64 --> |+page.server.js\nload function| aoo
  aoo --> |+page.svelte\ncomponent| html

:::note Tested Deployments

This demo was tested in the following environments:

Svelte	Kit	Date
`4.2.8`	`1.27.6`	2023-12-04
`5.0.0-next.17`	`1.27.6`	2023-12-04

:::

Integration

+page.server.js scripts can be pre-rendered by exporting prerender from the script. If the SheetJS operations are performed in the server script, only the results will be added to the generated pages!

For static site generation, @sveltejs/adapter-static must be used.

Loader

SvelteKit projects use ViteJS under the hood. They expose the vite.config.js script. The "Base64 Loader" from the ViteJS demo² can pull data from files into Base64 strings for processing in +page.server.js scripts.

:::note pass

The ViteJS demo used the query ?b64 to identify files. To play nice with SvelteKit, this demo matches the file extensions directly.

:::

The loader should be added to vite.config.js. The code is nearly identical to the "Base64 Loader" ViteJS example.

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { readFileSync } from 'fs';

export default defineConfig({
  assetsInclude: ['**/*.numbers', '**/*.xlsx'],
  plugins: [sveltekit(), {
    name: "sheet-base64",
    transform(code, id) {
      if(!id.match(/\.(numbers|xlsx)$/)) return;
      var data = readFileSync(id, "base64");
      return `export default '${data}'`;
    }
  }]
});

Types

For VSCodium integration, types can be specified in src/app.d.ts.

The example data loader returns Base64 strings. Declarations should be added for each file extension supported in the loader:

declare global {
  declare module '*.numbers' { const data: string; export default data; }
  declare module '*.xlsx'    { const data: string; export default data; }
}

Data Processing

For static sites, SheetJS operations should be run in +page.server.js³. The script must include export const prerender = true⁴.

Assuming pres.xlsx is stored in the data directory from the project root, the relative import

import b64 from "../../data/pres.xlsx"

will return a Base64 string which can be parsed in the script. The workbook object can be post-processed using utility functions.

The following example uses the SheetJS read method⁵ to parse spreadsheet files and the sheet_to_json method⁶ to generate arrays of row objects for each worksheet. The data presented to the page will be an object whose keys are worksheet names:

import b64 from "../../data/pres.xlsx";
import { read, utils } from "xlsx";

export const prerender = true;

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const wb = read(b64);
  /** @type {[string, any[]][]} */
  const data = wb.SheetNames.map(n => [n, utils.sheet_to_json(wb.Sheets[n])]);
  return Object.fromEntries(data);
}

Data Rendering

The shape of the data is determined by the loader. The example loader returns an object whose keys are worksheet names and whose values are arrays of objects.

Using standard Svelte patterns, HTML tables can be generated from the data:

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  /* `pres` will be the data from Sheet1 */
  /** @type {Array<{Name: string, Index: number}>}*/
  export let pres = data["Sheet1"];
</script>

<h1>Presidents</h1>
<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></table>

When built using npm run build, SvelteKit will perform the conversion and emit a simple HTML table without any reference to the existing spreadsheet file!

Complete Example

Initial Setup

Create a new site:

npm create svelte@latest sheetjs-svelte

When prompted:

Which Svelte app template? select Skeleton Project
Add type checking with TypeScript? select Yes, using JavaScript with JSDoc
Select additional options press Enter (do not select options)

:::note pass

To test the Svelte 5 beta, select "Try out Svelte 5 beta" before pressing Enter.

:::

Enter the project folder and install dependencies:

cd sheetjs-svelte
npm i

Fetch the example file pres.xlsx and move to a data subdirectory in the root of the project:

mkdir -p data
curl -Lo data/pres.xlsx https://sheetjs.com/pres.xlsx

Install the SheetJS library:

{\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz}

Replace the contents of vite.config.js with the following:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { readFileSync } from 'fs';

export default defineConfig({
  assetsInclude: ['**/*.numbers', '**/*.xlsx'],
  plugins: [sveltekit(), {
    name: "sheet-base64",
    transform(code, id) {
      if(!id.match(/\.(numbers|xlsx)$/)) return;
      var data = readFileSync(id, "base64");
      return `export default '${data}'`;
    }
  }]
});

Append the following lines to src/app.d.ts:

declare global {
  declare module '*.numbers' { const data: string; export default data; }
  declare module '*.xlsx'    { const data: string; export default data; }
}

Replace the contents of src/routes/+page.server.js with following:

import b64 from "../../data/pres.xlsx";
import { read, utils } from "xlsx";

export const prerender = true;

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const wb = read(b64);
  /** @type {[string, any[]][]} */
  const data = wb.SheetNames.map(n => [n, utils.sheet_to_json(wb.Sheets[n])]);
  return Object.fromEntries(data);
}

If the file does not exist, create a new file.

Replace the contents of src/routes/+page.svelte with the following:

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  /* `pres` will be the data from Sheet1 */
  /** @type {Array<{Name: string, Index: number}>}*/
  export let pres = data["Sheet1"];
</script>

<h1>Presidents</h1>
<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></table>

Live Reload

Open data/pres.xlsx in a spreadsheet editor like Apple Numbers or Excel.
Start the development server:

npm run dev

Open the displayed URL (typically http://localhost:5173) in a web browser and observe that the data from the spreadsheet is displayed in the page.

In the spreadsheet, set cell A7 to SheetJS Dev and cell B7 to 47. Save the file. After saving, the browser should automatically refresh with new data.

Static Site

Stop the development server and install the static adapter:

npm i --save @sveltejs/adapter-static

Edit svelte.config.js to use the new adapter.

The config should currently use adapter-auto:

import adapter from '@sveltejs/adapter-auto';

Replace the module name with @sveltejs/adapter-static:

import adapter from '@sveltejs/adapter-static';

Build the static site:

npm run build

Start a local web server that will host the production build:

npx -y http-server build

Open a web browser and access the displayed URL (http://localhost:8080). View the page source and confirm that the raw HTML table includes the data.

Searching for Bill Clinton should reveal the following row:

<tr><td>Bill Clinton</td><td>42</td></tr>

See "SvelteKit vs Svelte" in the SvelteKit documentation. ↩︎
See "Base64 Plugin" in the ViteJS demo ↩︎
See "Universal vs server" in the SvelteKit documentation. ↩︎
See "prerender" in the SvelteKit documentation. ↩︎
See read in "Reading Files" ↩︎
See sheet_to_json in "Utilities" ↩︎

10 KiB Raw Blame History