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

288 lines
8.0 KiB
Markdown
Raw Normal View History

2022-05-16 03:26:04 +00:00
---
title: Frameworks and Bundlers
2022-08-24 23:48:22 +00:00
pagination_prev: getting-started/index
2023-07-26 20:18:07 +00:00
pagination_next: getting-started/examples/index
2022-05-16 03:26:04 +00:00
sidebar_position: 2
sidebar_custom_props:
summary: Kaioken, Angular, React, VueJS, ViteJS, Webpack, etc.
2022-05-16 03:26:04 +00:00
---
import current from '/version.js';
2023-06-14 19:32:34 +00:00
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
2023-04-29 11:21:37 +00:00
import CodeBlock from '@theme/CodeBlock';
2022-05-16 03:26:04 +00:00
Each standalone release package is available at https://cdn.sheetjs.com/. The
NodeJS package is designed to be used with frameworks and bundlers. It is a
2022-05-16 03:26:04 +00:00
proper ECMAScript Module release which can be optimized with developer tools.
<p><a href={"https://cdn.sheetjs.com/xlsx-" + current + "/xlsx-" + current + ".tgz"}>{"https://cdn.sheetjs.com/xlsx-" + current + "/xlsx-" + current + ".tgz"}</a> is the URL for version {current}</p>
2023-06-14 19:32:34 +00:00
## Installation
Tarballs can be directly installed using a package manager:
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
2022-05-16 03:26:04 +00:00
<TabItem value="npm" label="npm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
npm rm --save xlsx
2022-08-07 07:48:40 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-05-16 03:26:04 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
pnpm rm xlsx
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-05-16 03:26:04 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
yarn remove xlsx
2022-08-07 07:48:40 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2024-06-09 21:48:23 +00:00
:::caution pass
Newer releases of Yarn may throw an error:
```
Usage Error: It seems you are trying to add a package using a https:... url; we now require package names to be explicitly specified.
Try running the command again with the package name prefixed: yarn add my-package@https:...
```
The workaround is to prepend the URL with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
:::
2022-05-16 03:26:04 +00:00
</TabItem>
</Tabs>
Once installed, the library can be imported under the name `xlsx`:
```js
import { read, writeFileXLSX } from "xlsx";
```
2024-04-12 01:04:37 +00:00
The ["Bundlers" demo](/docs/demos/frontend/bundler) includes complete examples.
2022-08-13 22:01:26 +00:00
2023-06-25 09:36:58 +00:00
:::tip pass
2023-04-27 09:12:19 +00:00
[Watch the repo](https://git.sheetjs.com/SheetJS/sheetjs) or subscribe to the
[RSS feed](https://git.sheetjs.com/sheetjs/sheetjs/tags.rss) to be notified when
new versions are released!
:::
2023-09-21 07:45:39 +00:00
:::caution Snyk Bugs
Snyk security tooling may report errors involving "Prototype Pollution":
```
Prototype Pollution [Medium Severity][https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926]
```
2024-06-09 21:48:23 +00:00
As noted in the [Snyk report](https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
2023-09-21 07:45:39 +00:00
> The issue is resolved in version 0.19.3
**Snyk is falsely reporting vulnerabilities. It is a bug in the Snyk tooling.**
Until Snyk fixes the bugs, the official recommendation is to
[suppress the warning](https://snyk.io/blog/ignoring-vulnerabilities-with-snyk/).
:::
2023-09-19 19:08:29 +00:00
### Legacy Endpoints
:::danger pass
2022-07-25 23:18:00 +00:00
Older releases are technically available on the public npm registry as `xlsx`,
but the registry is out of date. The latest version on that registry is 0.18.5
This is a known registry bug
**The SheetJS CDN** https://cdn.sheetjs.com/ **is the authoritative source**
2023-09-17 04:57:06 +00:00
**for SheetJS modules.**
2022-07-25 23:18:00 +00:00
For existing projects, the easiest approach is to uninstall and reinstall:
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
2022-07-25 23:18:00 +00:00
<TabItem value="npm" label="npm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
npm rm --save xlsx
2022-08-14 08:10:18 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 23:18:00 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
pnpm rm xlsx
2024-03-20 07:05:29 +00:00
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 23:18:00 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
yarn remove xlsx
2022-08-14 08:10:18 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 23:18:00 +00:00
</TabItem>
</Tabs>
2023-04-29 11:21:37 +00:00
When the `xlsx` library is a dependency of a dependency, the `overrides` field
in `package.json` can control module resolution:
<CodeBlock language="json" title="package.json">{`\
{
// highlight-start
"overrides": {
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
}
// highlight-end
}`}
</CodeBlock>
2022-07-25 23:18:00 +00:00
:::
2023-06-14 19:32:34 +00:00
### Vendoring
For general stability, making a local copy of SheetJS modules ("vendoring") is
strongly recommended. Vendoring decouples projects from SheetJS infrastructure.
2023-06-14 19:32:34 +00:00
2024-03-20 07:05:29 +00:00
0) Remove any existing dependency on a project named `xlsx`:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm rm --save xlsx`}
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
pnpm rm xlsx`}
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
yarn remove xlsx`}
</CodeBlock>
</TabItem>
</Tabs>
<ol start="1"><li><p>Download the tarball (<code parentName="pre">xlsx-{current}.tgz</code>) for the desired version. The current
version is available at <a href={"https://cdn.sheetjs.com/xlsx-" + current + "/xlsx-" + current + ".tgz"}>{"https://cdn.sheetjs.com/xlsx-" + current + "/xlsx-" + current + ".tgz"}</a></p></li></ol>
2023-06-14 19:32:34 +00:00
2) Create a `vendor` subfolder at the root of your project and move the tarball
to that folder. Add it to your project repository.
3) Install the tarball using a package manager:
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<CodeBlock language="bash">{`\
npm i --save file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
pnpm install --save file:vendor/xlsx-${current}.tgz`}
2023-06-14 19:32:34 +00:00
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<CodeBlock language="bash">{`\
2023-09-19 19:08:29 +00:00
yarn add file:vendor/xlsx-${current}.tgz`}
2023-06-14 19:32:34 +00:00
</CodeBlock>
2024-06-09 21:48:23 +00:00
:::caution pass
Newer releases of Yarn may throw an error:
2024-07-12 19:39:46 +00:00
<CodeBlock language="text">{`\
Usage Error: The file:vendor/xlsx-${current}.tgz string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?`}
</CodeBlock>
2024-06-09 21:48:23 +00:00
The workaround is to prepend the URI with `xlsx@`:
<CodeBlock language="bash">{`\
yarn add xlsx@file:vendor/xlsx-${current}.tgz`}
</CodeBlock>
:::
2023-06-14 19:32:34 +00:00
</TabItem>
</Tabs>
The package will be installed and accessible as `xlsx`.
## Usage
With most frameworks and bundler tools, named imports are recommended:
```js
import { read, utils } from 'xlsx';
```
Some legacy bundlers require the glob import:
```js
import * as XLSX from 'xlsx';
const { read, utils } = XLSX;
```
For legacy bundlers that support CommonJS, `require` will work:
```js
var XLSX = require("xlsx");
var read = XLSX.read, utils = XLSX.utils;
```
2024-04-12 01:04:37 +00:00
The ["Bundlers" demo](/docs/demos/frontend/bundler) includes complete examples.
2023-06-14 19:32:34 +00:00
2023-09-22 06:32:55 +00:00
### Dynamic Imports
Dynamic imports with `import()` will only download scripts when they are needed.
:::danger pass
2023-09-22 06:32:55 +00:00
Dynamic `import` will always download the full contents of the imported scripts!
**This is a design flaw in ECMAScript modules**
:::
It is strongly recommended to use a wrapper script that imports and re-exports
the parts of the SheetJS library that are used in a specific function or page:
```js title="SheetJSWriteWrapper.js (wrapper script)"
/* This wrapper pulls `writeFileXLSX` and `utils` from the SheetJS library */
import { utils, writeFileXLSX } from "xlsx";
export { utils, writeFileXLSX };
```
A dynamic import of the wrapper script will only load the requested features:
```js
async function export_data() {
/* dynamically import the SheetJS Wrapper */
// highlight-next-line
const XLSX = await import ("./SheetJSWriteWrapper");
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.writeFileXLSX(wb, "SheetJSDynamicWrapperTest.xlsx");
}
```
2022-08-26 19:21:53 +00:00
## Encoding support
2022-05-16 03:26:04 +00:00
2022-08-26 19:21:53 +00:00
If Encoding support is required, `cpexcel.full.mjs` must be manually imported:
2022-05-16 03:26:04 +00:00
```js
/* load the codepage support library for extended support with older formats */
import { set_cptable } from "xlsx";
import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
set_cptable(cptable);
```