diff --git a/README.md b/README.md index 02b3a75..504cebf 100644 --- a/README.md +++ b/README.md @@ -125,19 +125,19 @@ can be directly added to a page with a `script` tag: ``` -
- CDN Availability (click to show) - -| CDN | URL | -|-----------:|:-------------------------------------------| -| `unpkg` | | -| `jsDelivr` | | -| `CDNjs` | | - -For example, `unpkg` makes the latest version available at: +Each standalone release script is available at . The +latest version uses the `latest` tag: ```html - + + +``` + +A specific release can be referenced by version: + +```html + + ```
@@ -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 + + +``` + @@ -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 : + +```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 - + ``` @@ -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 - - + + @@ -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:
- + + + + 
+
SheetJS Next.JS {type} Demo

+This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
+
+
+
+); } + +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]]), + }, + } +} \ No newline at end of file diff --git a/demos/react/pages/getStaticPaths.js b/demos/react/pages/getStaticPaths.js new file mode 100644 index 0000000..3852295 --- /dev/null +++ b/demos/react/pages/getStaticPaths.js @@ -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 ( +
+ + + SheetJS Next.JS {type} Demo + + + + 
+
SheetJS Next.JS {type} Demo

+This demo reads from /public/sheetjs.xlsx.  Each worksheet maps to a path:


+{snames.map((sname, idx) => (<>
+  {`Sheet index=${idx} name="${sname}"`}
+  

+  

+))}
+
+
+
+); } + +export async function getStaticProps() { + const wb = readFile(join(cwd(), "public", "sheetjs.xlsx")) + return { + props: { + type: "getStaticPaths", + snames: wb.SheetNames, + }, + } +} \ No newline at end of file diff --git a/demos/react/pages/getStaticProps.js b/demos/react/pages/getStaticProps.js new file mode 100644 index 0000000..ca2e304 --- /dev/null +++ b/demos/react/pages/getStaticProps.js @@ -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 ( +
+ + + SheetJS Next.JS {type} Demo + + + + 
+
SheetJS Next.JS {type} Demo

+This demo reads from /public/sheetjs.xlsx and generates HTML from the first sheet.
+
+
+
+); } + +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]]), + }, + } +} \ No newline at end of file diff --git a/demos/react/pages/index.js b/demos/react/pages/index.js index ce781fd..c93bccd 100644 --- a/demos/react/pages/index.js +++ b/demos/react/pages/index.js @@ -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 (
- - - SheetJS React Demo - - - - -
-

SheetJS React Demo

-
- Source Code Repo
- Issues? Something look weird? Click here and report an issue

-
- + + + SheetJS Next.JS Demo + + + + 
+
SheetJS Next.JS Demos

+All demos read from /public/sheetjs.xlsx.

+

+- getStaticProps

+

+- getServerSideProps

+

+- getStaticPaths

+
-); -export default Index; \ No newline at end of file +); } \ No newline at end of file diff --git a/demos/react/pages/sheets/[id].js b/demos/react/pages/sheets/[id].js new file mode 100644 index 0000000..530b675 --- /dev/null +++ b/demos/react/pages/sheets/[id].js @@ -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 ( +
+ + + SheetJS Next.JS {type} Demo + + + + 
+
SheetJS Next.JS {type} Demo

+This demo reads from /public/sheetjs.xlsx.

+

+{name}
+
+
+
+); } + +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, + }; +} diff --git a/demos/react/public/sheetjs.xlsx b/demos/react/public/sheetjs.xlsx new file mode 100644 index 0000000..25496b9 Binary files /dev/null and b/demos/react/public/sheetjs.xlsx differ diff --git a/demos/react/react-native.js b/demos/react/react-native.js index c29eae6..2c11a98 100644 --- a/demos/react/react-native.js +++ b/demos/react/react-native.js @@ -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, diff --git a/demos/server/drash.ts b/demos/server/drash.ts index 3ff0e9e..5446b66 100644 --- a/demos/server/drash.ts +++ b/demos/server/drash.ts @@ -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"; diff --git a/docbits/10_install.md b/docbits/10_install.md index 6ae7918..41d374d 100644 --- a/docbits/10_install.md +++ b/docbits/10_install.md @@ -11,19 +11,19 @@ can be directly added to a page with a `script` tag: ``` -
- CDN Availability (click to show) - -| CDN | URL | -|-----------:|:-------------------------------------------| -| `unpkg` | | -| `jsDelivr` | | -| `CDNjs` | | - -For example, `unpkg` makes the latest version available at: +Each standalone release script is available at . The +latest version uses the `latest` tag: ```html - + + +``` + +A specific release can be referenced by version: + +```html + + ```
@@ -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 + + +``` + @@ -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 : + +```bash +$ npm install https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz ``` By default, the module supports `require`: diff --git a/docbits/13_usage.md b/docbits/13_usage.md index f6d866e..4e89c14 100644 --- a/docbits/13_usage.md +++ b/docbits/13_usage.md @@ -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 - + ``` diff --git a/docbits/16_demos.md b/docbits/16_demos.md index 44ecf89..43e7ba1 100644 --- a/docbits/16_demos.md +++ b/docbits/16_demos.md @@ -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/) diff --git a/docbits/22_ingress.md b/docbits/22_ingress.md index f5edbf9..0b58a00 100644 --- a/docbits/22_ingress.md +++ b/docbits/22_ingress.md @@ -152,8 +152,8 @@ Here are a few common scenarios (click on each subtitle to see the code): ```html - - + +
@@ -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); diff --git a/docbits/32_egress.md b/docbits/32_egress.md index 3189914..37ea3dc 100644 --- a/docbits/32_egress.md +++ b/docbits/32_egress.md @@ -169,7 +169,7 @@ Combining with `fetch`, constructing a site from a workbook is straightforward:
- + ``` - -| CDN | URL | -|-----------:|:-------------------------------------------| -| `unpkg` | | -| `jsDelivr` | | -| `CDNjs` | | - -For example, `unpkg` makes the latest version available at: +Each standalone release script is available at . The +latest version uses the `latest` tag: ```html - + + +``` + +A specific release can be referenced by version: + +```html + + ``` @@ -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 + + +``` + 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 : + +```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 - + ``` @@ -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 - - + +
@@ -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:
- +