GabrielZapata/sheetjs
1
Fork 0
forked from sheetjs/sheetjs
Code Pull Requests Activity

next.js demo refresh [ci skip]

Browse Source
This commit is contained in:
SheetJS 2022-04-12 07:59:15 -04:00
parent 19e0f8f358
commit b1dca24a0b
24 changed files with 383 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
README.md
View File

@ -125,19 +125,19 @@ can be directly added to a page with a `script` tag:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
```
<details>
<summary><b>CDN Availability</b> (click to show)</summary>
| CDN | URL |
|-----------:|:-------------------------------------------|
| `unpkg` | <https://unpkg.com/xlsx/> |
| `jsDelivr` | <https://jsdelivr.com/package/npm/xlsx> |
| `CDNjs` | <https://cdnjs.com/libraries/xlsx> |
For example, `unpkg` makes the latest version available at:
Each standalone release script is available at <https://cdn.sheetjs.com/>. The
latest version uses the `latest` tag:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
```
A specific release can be referenced by version:
```html
<!-- use version 0.18.5 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.5/package/dist/xlsx.full.min.js"></script>
```
</details>
@ -154,6 +154,13 @@ A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
- node stream utils removed
These scripts are also available on the CDN:
```html
<!-- use xlsx.core.min.js from the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.core.min.js"></script>
```
</details>
@ -193,23 +200,31 @@ set_cptable(cptable);
**Deno**
`xlsx.mjs` can be imported in Deno. It is available from `unpkg`:
`xlsx.mjs` can be imported in Deno:
```ts
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
```
**NodeJS**
With [npm](https://www.npmjs.org/package/xlsx):
Modules are available on [the public npm registry](https://www.npmjs.org/package/xlsx):
```bash
$ npm install xlsx
$ pnpm install xlsx # using pnpm
$ yarn add xlsx # using yarn
$ npm install xlsx # using npm
```
Tarballs are also available on <https://cdn.sheetjs.com>:
```bash
$ npm install https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
By default, the module supports `require`:
@ -519,7 +534,7 @@ For use in the web browser, assuming the snippet is saved to `snippet.js`,
script tags should be used to include the `axios` and `xlsx` standalone builds:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="snippet.js"></script>
```
@ -548,8 +563,8 @@ The [`demos` directory](demos/) includes sample projects for:
- [`angular and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)
- [`react, react-native, next`](demos/react/)
- [`vue 2.x, weex, nuxt`](demos/vue/)
- [`XMLHttpRequest and fetch`](demos/xhr/)
- [`nodejs server`](demos/server/)
- [`databases and key/value stores`](demos/database/)
@ -1186,8 +1201,8 @@ Here are a few common scenarios (click on each subtitle to see the code):
```html
<!-- include the standalone script and shim. this uses the UNPKG CDN -->
<script src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- example table with id attribute -->
<table id="tableau">
@ -1333,7 +1348,7 @@ var code = [ "function(){",
page.open('https://sheetjs.com/demos/table', function() {
/* Load the browser script from the UNPKG CDN */
page.includeJs("https://unpkg.com/xlsx/dist/xlsx.full.min.js", function() {
page.includeJs("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js", function() {
/* The code will return an XLSB file encoded as binary string */
var bin = page.evaluateJavaScript(code);
@ -1992,7 +2007,7 @@ Combining with `fetch`, constructing a site from a workbook is straightforward:
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<div id="tavolo"></div>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
(async() => {
/* fetch and parse workbook -- see the fetch example for details */

5
demos/README.md
View File

@ -22,8 +22,8 @@ can be installed with Bash on Windows or with `cygwin`.
- [`angular and ionic`](angular2/)
- [`knockout`](knockout/)
- [`meteor`](meteor/)
- [`react and react-native`](react/)
- [`vue 2.x and weex`](vue/)
- [`react, react-native, next`](react/)
- [`vue 2.x, weex, nuxt`](vue/)
- [`XMLHttpRequest and fetch`](xhr/)
- [`nodejs server`](server/)
- [`databases and key/value stores`](database/)
@ -50,6 +50,7 @@ can be installed with Bash on Windows or with `cygwin`.
- [`canvas-datagrid`](datagrid/)
- [`x-spreadsheet`](xspreadsheet/)
- [`react-data-grid`](react/modify/)
- [`vue3-table-light`](/vue/modify/)
- [`Swift JSC and other engines`](altjs/)
- [`"serverless" functions`](function/)
- [`internet explorer`](oldie/)

12
demos/deno/README.md
View File

@ -4,14 +4,14 @@ Deno is a runtime capable of running JS code including this library. There are
a few different builds and recommended use cases as covered in this demo.
Due to ongoing stability and sync issues with the Deno registry, scripts should
use [the `unpkg` CDN build](https://unpkg.com/xlsx/xlsx.mjs):
use [the CDN build](https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs):
```js
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
```
@ -62,8 +62,8 @@ accepts the `XLSX` module as an argument.
- `x` imports the ESM build without the codepage library:
```ts
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
```
- `mjs` imports the ESM build and the associated codepage library:

6
demos/deno/sheet2csv.ts
View File

@ -1,7 +1,7 @@
/*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
const filename = Deno.args[0];

4
demos/deno/x.ts
View File

@ -1,5 +1,5 @@
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
import doit from './doit.ts';
doit(XLSX, "x");

2
demos/headless/phantomjs.js
View File

@ -17,7 +17,7 @@ var code = [ "function(){",
page.open('https://sheetjs.com/demos/table', function() {
console.log("Page Loaded");
/* Load the browser script from the UNPKG CDN */
page.includeJs("https://unpkg.com/xlsx/dist/xlsx.full.min.js", function() {
page.includeJs("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js", function() {
/* Verify the page is loaded by logging the version number */
var version = "function(){ console.log('Library Version:' + window.XLSX.version); }";
page.evaluateJavaScript(version);

3
demos/react/Makefile
View File

@ -4,9 +4,6 @@ react: init ## Simple server for react and clones
.PHONY: next
next: init ## next.js demo
mkdir -p pages public
cat nexthdr.js sheetjs.js > pages/sheetjs.js
cp ../../shim.js public/shim.js
next
.PHONY: native

76
demos/react/README.md
View File

@ -96,20 +96,84 @@ Components used in the demo:
- [`react-native-file-access`](https://npm.im/react-native-file-access)
React Native does not provide a native component for reading and writing files.
The sample script <`react-native.js`> uses `react-native-file-access` and has
The sample script `react-native.js` uses `react-native-file-access` and has
notes for integrations with `react-native-fetch-blob` and `react-native-fs`.
Note: for real app deployments, the `UIFileSharingEnabled` flag must be manually
set in the iOS project `Info.plist` file.
#### Server-Rendered React Components with Next.js
## Server-Rendered React Components with Next.js
The demo uses the same component code as the in-browser version, but the build
step adds a small header that imports the library. The import is not needed in
deployments that use script tags to include the library.
The demo reads from `public/sheetjs.xlsx`. HTML output is generated using
`XLSX.utils.sheet_to_html` and inserted with `dangerouslySetInnerHTML`:
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)
```jsx
export default function Index({html, type}) { return (
// ...
<div dangerouslySetInnerHTML={{ __html: html }} />
// ...
); }
```
Next currently offers 3 general strategies for server-side data fetching:
#### "Server-Side Rendering" using `getServerSideProps`
`/getServerSideProps` reads the file on each request. The first worksheet is
converted to HTML:
```js
export async function getServerSideProps() {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]])
}};
}
```
#### "Static Site Generation" using `getStaticProps`
`/getServerSideProps` reads the file at build time. The first worksheet is
converted to HTML:
```js
export async function getStaticProps() {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]])
}};
}
```
#### "Static Site Generation with Dynamic Routes" using `getStaticPaths`
`/getStaticPaths` reads the file at build time and generates a list of sheets.
`/sheets/[id]` uses `getStaticPaths` to generate a path per sheet index:
```js
export async function getStaticPaths() {
const wb = XLSX.readFile(path);
return {
paths: wb.SheetNames.map((name, idx) => ({ params: { id: idx.toString() } })),
fallback: false
};
}
```
It also uses `getStaticProps` for the actual HTML generation:
```js
export async function getStaticProps(ctx) {
const wb = XLSX.readFile(path);
return { props: {
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[ctx.params.id]]),
}};
}
```
## Additional Notes
Some additional notes can be found in [`NOTES.md`](NOTES.md).
[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)

4
demos/react/nexthdr.js
View File

@ -1,3 +1,3 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import React from 'react';
import * as XLSX from 'xlsx';
import React from 'react';

1
demos/react/pages/.gitignore vendored
View File

@ -1 +0,0 @@
sheetjs.js

32
demos/react/pages/getServerSideProps.js Normal file
View File

@ -0,0 +1,32 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
export async function getServerSideProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticProps",
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]),
},
}
}

38
demos/react/pages/getStaticPaths.js Normal file
View File

@ -0,0 +1,38 @@
import Head from 'next/head';
import Link from "next/link";
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({snames, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx. Each worksheet maps to a path:<br/><br/>
{snames.map((sname, idx) => (<>
<Link key={idx} href="/sheets/[id]" as={`/sheets/${idx}`}><a>{`Sheet index=${idx} name="${sname}"`}</a></Link>
<br/>
<br/>
</>))}
</pre>
</div>
); }
export async function getStaticProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticPaths",
snames: wb.SheetNames,
},
}
}

32
demos/react/pages/getStaticProps.js Normal file
View File

@ -0,0 +1,32 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
export async function getStaticProps() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"))
return {
props: {
type: "getStaticProps",
html: utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]),
},
}
}

43
demos/react/pages/index.js
View File

@ -1,23 +1,24 @@
import Head from 'next/head'
import SheetJSApp from './sheetjs'
const Index = () => (
import Head from 'next/head';
export default function Index() { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS React Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<div className="container-fluid">
<h1><a href="http://sheetjs.com">SheetJS React Demo</a></h1>
<br />
<a href="https://github.com/SheetJS/js-xlsx">Source Code Repo</a><br />
<a href="https://github.com/SheetJS/js-xlsx/issues">Issues? Something look weird? Click here and report an issue</a><br /><br />
</div>
<SheetJSApp />
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS Demos</h3>
All demos read from /public/sheetjs.xlsx.<br/>
<br/>
- <a href="/getStaticProps">getStaticProps</a><br/>
<br/>
- <a href="/getServerSideProps">getServerSideProps</a><br/>
<br/>
- <a href="/getStaticPaths">getStaticPaths</a><br/>
</pre>
</div>
);
export default Index;
); }

51
demos/react/pages/sheets/[id].js Normal file
View File

@ -0,0 +1,51 @@
import Head from 'next/head';
import { readFile, utils } from 'xlsx';
import { join } from 'path';
import { cwd } from 'process';
export default function Index({html, type, name}) { return (
<div>
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Next.JS {type} Demo</title>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
</Head>
<pre>
<h3>SheetJS Next.JS {type} Demo</h3>
This demo reads from /public/sheetjs.xlsx.<br/>
<br/>
<b>{name}</b>
</pre>
<div dangerouslySetInnerHTML={{ __html: html }} />
</div>
); }
let cache = [];
export async function getStaticProps(ctx) {
if(!cache || !cache.length) {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"));
cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
}
const entry = cache[ctx.params.id];
return {
props: {
type: "getStaticPaths",
name: entry.name,
id: ctx.params.id.toString(),
html: entry.sheet ? utils.sheet_to_html(entry.sheet) : "",
},
}
}
export async function getStaticPaths() {
const wb = readFile(join(cwd(), "public", "sheetjs.xlsx"));
cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
return {
paths: wb.SheetNames.map((name, idx) => ({ params: { id: idx.toString() } })),
fallback: false,
};
}

BIN
demos/react/public/sheetjs.xlsx Normal file
View File

Binary file not shown.

2
demos/react/react-native.js vendored
View File

@ -1,5 +1,5 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import * as XLSX from 'xlsx';
import React, { Component } from 'react';
import {
AppRegistry,

6
demos/server/drash.ts
View File

@ -1,7 +1,7 @@
/*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import { read, utils, set_cptable } from 'https://unpkg.com/xlsx/xlsx.mjs';
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import { read, utils, set_cptable } from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
set_cptable(cptable);
import * as Drash from "https://deno.land/x/drash@v2.5.4/mod.ts";

49
docbits/10_install.md
View File

@ -11,19 +11,19 @@ can be directly added to a page with a `script` tag:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
```
<details>
<summary><b>CDN Availability</b> (click to show)</summary>
| CDN | URL |
|-----------:|:-------------------------------------------|
| `unpkg` | <https://unpkg.com/xlsx/> |
| `jsDelivr` | <https://jsdelivr.com/package/npm/xlsx> |
| `CDNjs` | <https://cdnjs.com/libraries/xlsx> |
For example, `unpkg` makes the latest version available at:
Each standalone release script is available at <https://cdn.sheetjs.com/>. The
latest version uses the `latest` tag:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
```
A specific release can be referenced by version:
```html
<!-- use version 0.18.5 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.5/package/dist/xlsx.full.min.js"></script>
```
</details>
@ -40,6 +40,13 @@ A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
- node stream utils removed
These scripts are also available on the CDN:
```html
<!-- use xlsx.core.min.js from the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.core.min.js"></script>
```
</details>
@ -79,23 +86,31 @@ set_cptable(cptable);
**Deno**
`xlsx.mjs` can be imported in Deno. It is available from `unpkg`:
`xlsx.mjs` can be imported in Deno:
```ts
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
```
**NodeJS**
With [npm](https://www.npmjs.org/package/xlsx):
Modules are available on [the public npm registry](https://www.npmjs.org/package/xlsx):
```bash
$ npm install xlsx
$ pnpm install xlsx # using pnpm
$ yarn add xlsx # using yarn
$ npm install xlsx # using npm
```
Tarballs are also available on <https://cdn.sheetjs.com>:
```bash
$ npm install https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
By default, the module supports `require`:

2
docbits/13_usage.md
View File

@ -248,7 +248,7 @@ For use in the web browser, assuming the snippet is saved to `snippet.js`,
script tags should be used to include the `axios` and `xlsx` standalone builds:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="snippet.js"></script>
```

4
docbits/16_demos.md
View File

@ -7,8 +7,8 @@ The [`demos` directory](demos/) includes sample projects for:
- [`angular and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)
- [`react, react-native, next`](demos/react/)
- [`vue 2.x, weex, nuxt`](demos/vue/)
- [`XMLHttpRequest and fetch`](demos/xhr/)
- [`nodejs server`](demos/server/)
- [`databases and key/value stores`](demos/database/)

6
docbits/22_ingress.md
View File

@ -152,8 +152,8 @@ Here are a few common scenarios (click on each subtitle to see the code):
```html
<!-- include the standalone script and shim. this uses the UNPKG CDN -->
<script src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- example table with id attribute -->
<table id="tableau">
@ -299,7 +299,7 @@ var code = [ "function(){",
page.open('https://sheetjs.com/demos/table', function() {
/* Load the browser script from the UNPKG CDN */
page.includeJs("https://unpkg.com/xlsx/dist/xlsx.full.min.js", function() {
page.includeJs("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js", function() {
/* The code will return an XLSB file encoded as binary string */
var bin = page.evaluateJavaScript(code);

2
docbits/32_egress.md
View File

@ -169,7 +169,7 @@ Combining with `fetch`, constructing a site from a workbook is straightforward:
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<div id="tavolo"></div>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
(async() => {
/* fetch and parse workbook -- see the fetch example for details */

61
misc/docs/README.md
View File

@ -122,17 +122,19 @@ can be directly added to a page with a `script` tag:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
```
| CDN | URL |
|-----------:|:-------------------------------------------|
| `unpkg` | <https://unpkg.com/xlsx/> |
| `jsDelivr` | <https://jsdelivr.com/package/npm/xlsx> |
| `CDNjs` | <https://cdnjs.com/libraries/xlsx> |
For example, `unpkg` makes the latest version available at:
Each standalone release script is available at <https://cdn.sheetjs.com/>. The
latest version uses the `latest` tag:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<!-- use the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
```
A specific release can be referenced by version:
```html
<!-- use version 0.18.5 -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.18.5/package/dist/xlsx.full.min.js"></script>
```
@ -146,6 +148,13 @@ A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
- no support for XLSB / XLS / Lotus 1-2-3 / SpreadsheetML 2003 / Numbers
- node stream utils removed
These scripts are also available on the CDN:
```html
<!-- use xlsx.core.min.js from the latest version -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.core.min.js"></script>
```
With [bower](https://bower.io/search/?q=js-xlsx):
@ -184,23 +193,31 @@ set_cptable(cptable);
**Deno**
`xlsx.mjs` can be imported in Deno. It is available from `unpkg`:
`xlsx.mjs` can be imported in Deno:
```ts
// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
import * as cptable from 'https://cdn.sheetjs.com/xlsx-latest/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
```
**NodeJS**
With [npm](https://www.npmjs.org/package/xlsx):
Modules are available on [the public npm registry](https://www.npmjs.org/package/xlsx):
```bash
$ npm install xlsx
$ pnpm install xlsx # using pnpm
$ yarn add xlsx # using yarn
$ npm install xlsx # using npm
```
Tarballs are also available on <https://cdn.sheetjs.com>:
```bash
$ npm install https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
By default, the module supports `require`:
@ -505,7 +522,7 @@ For use in the web browser, assuming the snippet is saved to `snippet.js`,
script tags should be used to include the `axios` and `xlsx` standalone builds:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="snippet.js"></script>
```
@ -533,8 +550,8 @@ The [`demos` directory](demos/) includes sample projects for:
- [`angular and ionic`](demos/angular2/)
- [`knockout`](demos/knockout/)
- [`meteor`](demos/meteor/)
- [`react and react-native`](demos/react/)
- [`vue 2.x and weex`](demos/vue/)
- [`react, react-native, next`](demos/react/)
- [`vue 2.x, weex, nuxt`](demos/vue/)
- [`XMLHttpRequest and fetch`](demos/xhr/)
- [`nodejs server`](demos/server/)
- [`databases and key/value stores`](demos/database/)
@ -1124,8 +1141,8 @@ Here are a few common scenarios (click on each subtitle to see the code):
```html
<!-- include the standalone script and shim. this uses the UNPKG CDN -->
<script src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<!-- example table with id attribute -->
<table id="tableau">
@ -1262,7 +1279,7 @@ var code = [ "function(){",
page.open('https://sheetjs.com/demos/table', function() {
/* Load the browser script from the UNPKG CDN */
page.includeJs("https://unpkg.com/xlsx/dist/xlsx.full.min.js", function() {
page.includeJs("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js", function() {
/* The code will return an XLSB file encoded as binary string */
var bin = page.evaluateJavaScript(code);
@ -1867,7 +1884,7 @@ Combining with `fetch`, constructing a site from a workbook is straightforward:
<body>
<style>TABLE { border-collapse: collapse; } TD { border: 1px solid; }</style>
<div id="tavolo"></div>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
(async() => {
/* fetch and parse workbook -- see the fetch example for details */