docs.sheetjs.com/docz/docs/02-getting-started/01-installation/01-standalone.md

9.3 KiB

title pagination_prev pagination_next sidebar_position sidebar_custom_props
Standalone Browser Scripts getting-started/index getting-started/examples/index 1
summary
Classic pages with simple <script> tags

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

Each standalone release script is available at https://cdn.sheetjs.com/.

The current version is {current} and can be referenced as follows:

{`\

`}

:::tip pass

Watch the repo or subscribe to the RSS feed to be notified when new versions are released!

:::

:::danger pass

A number of services host older versions of the SheetJS libraries. Due to syncing issues, they are generally out of date.

The SheetJS CDN https://cdn.sheetjs.com/ is the authoritative source for SheetJS scripts

:::

Browser Scripts

xlsx.full.min.js is the complete standalone script. It includes support for reading and writing many spreadsheet formats.

{`\

`}

xlsx.mini.min.js is a slimmer build that omits the following features:

  • CSV and SYLK encodings (directly affecting users outside of the United States)
  • XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Apple Numbers file formats
  • Stream utility functions
How to integrate the mini build (click to show)

A single script tag should be added at the top of the HTML page:

{`\

`}

Vendoring

For general stability, making a local copy of SheetJS scripts ("vendoring") is strongly recommended. Vendoring decouples websites from SheetJS infrastructure.

  1. Download the script (xlsx.full.min.js) for the desired version. The current version is available at {"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.full.min.js"}

  1. Move the script to a public folder with other scripts.

  2. Reference the vendored script from HTML pages:

<script src="/public/xlsx.full.min.js"></script>

This script assigns to window.XLSX. The global can be used in other scripts.

Internet Explorer and Older Browsers

For broad compatibility with JavaScript engines, the library is written using ECMAScript 3 language dialect. A "shim" script provides implementations of functions for older browsers and environments.

Due to SSL compatibility issues, older versions of IE will not be able to use the CDN scripts directly. They should be downloaded and saved to a public path:

  • Standalone: {"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/xlsx.mini.min.js"}
  • Shim: {"https://cdn.sheetjs.com/xlsx-" + current + "/package/dist/shim.min.js"}

A script reference to the shim must be added before the standalone script:

<!-- add the shim first -->
<script type="text/javascript" src="shim.min.js"></script>
<!-- after the shim is referenced, add the library -->
<script type="text/javascript" src="xlsx.full.min.js"></script>

Web Workers

The standalone scripts can be loaded using importScripts at the top of the worker scripts:

{\ importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"); importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js");}

Type Checker

:::danger VSCode Telemetry and Data Exfiltration

The official Microsoft builds of Visual Studio Code ("VSCode") embed telemetry and send information to external servers.

VSCodium is a telemetry-free fork of VSCode.

When writing code that may process personally identifiable information (PII), the SheetJS team strongly encourages building VSCode from source or using IDEs that do not exfiltrate data.

:::

The type checker integrated in VSCodium and VSCode does not currently provide type hints when using the standalone build. Using the JSDoc @type directive coupled with type imports, VSCodium will recognize the types:

VSCodium types

  1. Download the types (index.d.ts) for the desired version. The current version is available at {"https://cdn.sheetjs.com/xlsx-" + current + "/package/types/index.d.ts"}

  1. Rename the types file to xlsx.d.ts. It does not need to reside in the same folder as the standalone script.

  2. In the browser script referencing the global, prepend the following lines:

/** @type {import("./xlsx")} */
const XLSX = globalThis.XLSX;
  1. If the xlsx.d.ts file is in a different folder, change the argument to the import method to reflect the relative path. For example, given the structure:
- /vendor
  - /vendor/xlsx.ts
- /src
  - /src/app.js

/src/app.js must refer to the types as ../vendor/xlsx:

// highlight-next-line
/** @type {import("../vendor/xlsx")} */
const XLSX = globalThis.XLSX;

The .d.ts file extension must be omitted.

:::warning pass

JSDoc types using the @import directive are not supported in <script> tags.

This is a known bug with VSCode!

:::

ECMAScript Module Imports

:::info pass

This section refers to imports in HTML pages using <script type="module">.

The "Frameworks and Bundlers" section covers imports in projects using bundlers (ViteJS) or frameworks (Kaioken / ReactJS / Angular / VueJS / Svelte)

:::

The ECMAScript Module build is saved to xlsx.mjs and can be directly added to a page with a script tag using type="module":

{`\

`}

If Encoding support is required, cpexcel.full.mjs must be manually imported:

{`\

`}

Web Worker support is noted in the "Web Workers" demo

Dynamic Imports

Dynamic imports with import() will only download the SheetJS scripts when they are used. This example will download the library when data is exported:

{`
Export

`}

:::caution pass

The callback functions must be marked as async and the script block must have the attribute type="module"

:::

If Encoding support is required, cpexcel.full.mjs must be manually imported:

{`
Export

`}

Bower

:::danger pass

Bower is deprecated and the maintainers recommend using other tools.

:::

The Bower package manager supports tarballs from the SheetJS CDN:

{\ npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz}

Bower will place the standalone scripts in bower_components/js-xlsx/dist/