docs.sheetjs.com/docz/docs/03-demos/04-static/07-eleventy.md

title	pagination_prev	pagination_next
Eleventy	demos/net/index	demos/mobile/index

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

Eleventy is a static site generator.

The NodeJS module can be loaded in .eleventy.js and used in custom data file format parsers.

The following diagram depicts the workbook waltz:

flowchart LR
  file[(workbook\nfile)]
  subgraph SheetJS operations
    buffer(NodeJS\nBuffer)
    aoo(array of\nobjects)
  end
  html{{HTML\nTABLE}}
  file --> |.eleventy.js\ncustom parser| buffer
  buffer --> |.eleventy.js\ncustom parser| aoo
  aoo --> |index.njk\ntemplate| html

Integration Details

Data File Parser

Custom data file parsers must be registered in .eleventy.js

addDataExtension accepts a list of file extensions and a parser object.

The parser object must include the options read: true and encoding: null . Eleventy will read files and pass raw Buffer objects to the parser callback.

The parser callback can parse the data with XLSX.read. In this demo, the parser will generate an array of row objects using XLSX.utils.sheet_to_json:

const XLSX = require("xlsx");

/* list of file extensions */
const exts = [ "numbers", "xlsx", "xlsb", "xls" ].join(", ");

module.exports = (eleventyConfig) => {
  eleventyConfig.addDataExtension(exts, {
    /* read file and pass raw Buffer object to parser */
    // highlight-next-line
    encoding: null, read: true,

    /* parser callback */
    parser: (contents) => {
      /* contents is the data stored as a Buffer */
      // highlight-next-line
      const wb = XLSX.read(contents);
      /* generate array of row objects from first worksheet */
      return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    }
  });
};

Usage

Spreadsheet files added in the _data subdirectory are accessible from template files using the name stem.

For example, pres.numbers can be accessed using the variable pres in a template:

<table><thead><th>Name</th><th>Index</th></thead>
  <tbody>
  {% for row in pres %}
    <tr>
      <td>{{ row.Name }}</td>
      <td>{{ row.Index }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>

Complete Example

:::note

This demo was tested on 2023 May 07 using Eleventy 2.0.1

:::

Project Setup

1. Create a new project:

mkdir sheetjs-11ty
cd sheetjs-11ty
npm init -y

2. Install Eleventy and SheetJS libraries:

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

3. Make a new _data subdirectory in the project. Download the example file pres.xlsx into _data:

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

4. Download the following files to the project folder:

• _eleventy.js (rename to .eleventy.js)
• index.njk

curl -L -o .eleventy.js https://docs.sheetjs.com/eleventy/_eleventy.js
curl -LO https://docs.sheetjs.com/eleventy/index.njk

Live Reload

5. Start the live reloading server:

npx @11ty/eleventy --serve

The server will generate index.html from index.njk and show the server URL:

[11ty] Writing _site/index.html from ./index.njk
[11ty] Wrote 1 file in 0.23 seconds (v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/ <-- this is the URL

6. Open the URL in a web browser. The page should include a table.

7. Open _data/pres.xlsx in a spreadsheet editor. Add a new row to the end of the list and save the file.

The server log will note that the file changed:

[11ty] File changed: _data/pres.xlsx
[11ty] Writing _site/index.html from ./index.njk

The browser will refresh to show the new data.

Static Site

8. Stop the live reload server and build the static site:

npx @11ty/eleventy

Eleventy will place the generated site in the _site subfolder.

9. Start a web server to host the static site:

npx http-server _site

Open a web browser and access the displayed URL ( http://localhost:8080 ). View the page source and confirm that no JS was added to the page. It only contains the content from the file in an HTML table.