---
sidebar_position: 1
sidebar_custom_props:
  summary: Classic pages with simple <script> tags
---

import current from '/version.js';

# Standalone Browser Scripts

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

<div>The current version is {current} and can be referenced as follows:</div>

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<!-- use version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>

The `latest` tag references the latest version and updates with each release:

```html
<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
```


## Browser Scripts

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

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<!-- use xlsx.full.min.js from version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>


A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
- codepage library skipped (no support for XLS encodings)
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
- node stream utils removed

<details><summary><b>How to integrate the mini build</b> (click to show)</summary>

Replace references to `xlsx.full.min.js` with `xlsx.mini.min.js`.  Starting from
scratch, a single script tag should be added at the top of the HTML page:

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<!-- use xlsx.mini.min.js from version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.mini.min.js"></script>`}
</code></pre>

</details>

### 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.

<div>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
directory in the site:
<ul>
<li>Standalone: <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.mini.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.mini.min.js</a></li>
<li>Shim: <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/shim.min.js</a></li>
</ul>
</div>

Add a `script` reference to the shim before the script tag that loads `xlsx.js`:

```html
<!-- 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:

<pre><code parentName="pre" {...{"className": "language-js"}}>{`\
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");`}
</code></pre>


## ECMAScript Module Imports in a SCRIPT TAG

:::caution

This section refers to imports using `script type="module"`.  For imports in
modern projects using Webpack or React or Angular or Vue, the installation is
described [in the next section](./frameworks).

:::

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

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<script type="module">
import { read, writeFileXLSX } from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs";
</script>`}
</code></pre>

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

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<script type="module">
/* load the codepage support library for extended support with older formats  */
import { set_cptable } from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs";
import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
set_cptable(cptable);
</script>`}
</code></pre>

Dynamic imports with `import()` can be used in data export scenarios.  This
example will download the library only when the export button is pressed:

<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<button id="xport">Export</button>
<script type="module">
xport.addEventListener("click", async() => {

  /* dynamically import the library in the event listener */
  // highlight-next-line
  const XLSX = await import("https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs");

  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.aoa_to_sheet([["a","b","c"],[1,2,3]]);
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "SheetJSESMTest.xlsx");
});
</script>`}
</code></pre>


## Bower

:::caution

Bower is deprecated and the maintainers recommend using other tools.

:::


[Bower](https://bower.io/) plays nice with the CDN tarballs:

<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
$ npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>

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