next.js demo refresh [ci skip]
This commit is contained in:
parent
19e0f8f358
commit
b1dca24a0b
63
README.md
63
README.md
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`:
|
||||
|
||||
[](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).
|
||||
|
||||
[](https://github.com/SheetJS/js-xlsx)
|
||||
|
|
|
|||
|
|
@ -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 +0,0 @@
|
|||
sheetjs.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 (
|
||||
<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]]),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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]]),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
); }
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
Binary file not shown.
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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`:
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue