docs.sheetjs.com/index.md at f14874c930a3ce8c75f3e0f7bc76bf3063b942fc

asadbek064/docs.sheetjs.com

Fork 0

forked from sheetjs/docs.sheetjs.com

SheetJS f14874c930 dojo

2023-11-28 02:07:55 -05:00

7.6 KiB

Raw Blame History

title

pagination_prev

pagination_next

sidebar_position

sidebar_custom_props

Bundlers

demos/index

demos/grid/index

skip
1

import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock'; import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

SheetJS predates ECMAScript modules and most bundler tools. As best practices have evolved, stress testing SheetJS libraries have revealed bugs in bundlers and other tools. This demo collects various notes and provides basic examples.

:::note pass

Issues should be reported to the respective bundler projects. Typically it is considered a bundler bug if the tool cannot properly handle JS libraries.

:::

The following tools are covered in separate pages:

{item.label}{item.customProps?.summary && (" - " + item.customProps.summary)}

Dojo

Integration details are included in the "AMD" installation

Complete Examples are included in the "Dojo" demo

Snowpack

Snowpack works with no caveats.

Complete Example (click to show)

:::note

This demo was last tested on 2023 October 21 against Snowpack 3.8.8

:::

Initialize a new project:

mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y

Install the tarball using a package manager:

{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}

Save the following to index.js:

// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

/* flatten objects */
const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");

/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];

/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});

Create a small HTML page that loads the script. Save to index.html:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script type="module" src="./index.js"></script>
  </body>
</html>

:::note pass

Unlike other bundlers, Snowpack requires a full page including HEAD element.

:::

Build for production:

npx snowpack@3.8.8 build

Start a local HTTP server, then go to http://localhost:8080/

npx http-server build/

Click on "Click here to export" to generate a file.

WMR

WMR works with no caveats.

Complete Example (click to show)

:::note

This demo was last tested on 2023 Oct 21 against WMR 3.8.0

:::

Initialize a new project:

mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y

Install the tarball using a package manager:

Save the following to index.js:

// highlight-next-line
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

/* flatten objects */
const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");

/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];

/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});

Create a small HTML page that loads the script. Save to index.html:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script type="module" src="./index.js"></script>
  </body>
</html>

Build for production:

npx wmr@3.8.0 build

Start a local HTTP server in dist folder and go to http://localhost:8080/

npx http-server dist/

Click on "Click here to export" to generate a file.

7.6 KiB Raw Blame History

Dojo

Snowpack

WMR

Browserify

Bun

esbuild

Parcel

RequireJS

Rollup

SWC

SystemJS

Vite

Webpack

7.6 KiB

Raw Blame History