Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
da8275ae2a | ||
|
|
681905928c |
@ -277,27 +277,24 @@ This complete component example fetches a test file and displays the contents in
|
||||
a HTML table. When the export button is clicked, a callback will export a file:
|
||||
|
||||
```jsx title="src/SheetJSReactAoO.js"
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { read, utils, writeFileXLSX } from 'xlsx';
|
||||
|
||||
export default function SheetJSReactAoO() {
|
||||
/* the component state is an array of presidents */
|
||||
const [pres, setPres] = useState([]);
|
||||
const [pres, setPres] = useState([] /* as any[] */);
|
||||
|
||||
/* Fetch and update the state once */
|
||||
useEffect(() => { (async() => {
|
||||
const f = await (await fetch("https://docs.sheetjs.com/pres.xlsx")).arrayBuffer();
|
||||
// highlight-start
|
||||
const wb = read(f); // parse the array buffer
|
||||
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
|
||||
const data = utils.sheet_to_json(ws); // generate objects
|
||||
setPres(data); // update state
|
||||
// highlight-end
|
||||
})(); }, []);
|
||||
|
||||
/* get state data and export to XLSX */
|
||||
const exportFile = useCallback(() => {
|
||||
// highlight-next-line
|
||||
const ws = utils.json_to_sheet(pres);
|
||||
const wb = utils.book_new();
|
||||
utils.book_append_sheet(wb, ws, "Data");
|
||||
@ -306,16 +303,14 @@ export default function SheetJSReactAoO() {
|
||||
|
||||
return (<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
|
||||
{ /* generate row for each president */
|
||||
// highlight-start
|
||||
pres.map(pres => (<tr>
|
||||
pres.map((pres, index) => (<tr key={index}>
|
||||
<td>{pres.Name}</td>
|
||||
<td>{pres.Index}</td>
|
||||
</tr>))
|
||||
// highlight-end
|
||||
}
|
||||
</tbody><tfoot><td colSpan={2}>
|
||||
</tbody><tfoot><tr><td colSpan={2}>
|
||||
<button onClick={exportFile}>Export XLSX</button>
|
||||
</td></tfoot></table>);
|
||||
</td></tr></tfoot></table>);
|
||||
}
|
||||
```
|
||||
|
||||
@ -331,7 +326,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | ViteJS | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.2.0` | `5.1.6` | 2024-03-13 |
|
||||
| `18.3.1` | `6.0.1` | 2024-12-12 |
|
||||
|
||||
:::
|
||||
|
||||
@ -363,7 +358,7 @@ and the page will attempt to download `SheetJSReactAoO.xlsx`.
|
||||
npm run build
|
||||
```
|
||||
|
||||
The generated site will be placed in the `dist` folder.
|
||||
The generated site will be placed in the `.next` folder.
|
||||
|
||||
6) Start a local web server:
|
||||
|
||||
@ -383,10 +378,17 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | CRA | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.2.0` | `5.0.1` | 2024-03-13 |
|
||||
| `18.2.0` | `5.0.1` | 2024-12-12 |
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
CRA has known compatibility issues with React 19+[^cra]. CRA no longer receives updates and the ReactJS docs no longer recommend using CRA. For new projects, it is strongly recommended to use ViteJS with the react or react-ts templates.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
1) Create a new site:
|
||||
|
||||
```bash
|
||||
@ -398,6 +400,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-react
|
||||
npm i
|
||||
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact # fixes CRA dependency conflicts w/ React 19
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm start`}
|
||||
</CodeBlock>
|
||||
@ -426,6 +429,8 @@ npx http-server build
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
and test the page.
|
||||
|
||||
[^cra]: See [Create React App Issue #13717](https://github.com/facebook/create-react-app/issues/13717) for details about React 19+ compatibility issues.
|
||||
|
||||
</TabItem>
|
||||
<TabItem name="nextjs" value="NextJS">
|
||||
|
||||
@ -435,7 +440,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | NextJS | Date |
|
||||
|:---------|:---------|:-----------|
|
||||
| `18.2.0` | `14.1.3` | 2024-03-13 |
|
||||
| `19.0.0` | `15.1.0` | 2024-12-13 |
|
||||
|
||||
:::
|
||||
|
||||
@ -480,26 +485,26 @@ npx next telemetry disable
|
||||
1) Create a new site:
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest sheetjs-react --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*"
|
||||
npx create-next-app@latest sheetjs-nextjs --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*" --no-turbopack
|
||||
```
|
||||
|
||||
2) Install the SheetJS dependency and start the dev server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-react
|
||||
cd sheetjs-nextjs
|
||||
npm i
|
||||
npx next telemetry disable
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm run dev`}
|
||||
</CodeBlock>
|
||||
|
||||
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
|
||||
3) Open a web browser and access the displayed URL (`http://localhost:3000`)
|
||||
|
||||
4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example.
|
||||
4) Replace `pages/index.tsx` with the `src/SheetJSReactAoO.js` example.
|
||||
|
||||
After replacing the code, add the following to the top of `src/App.jsx`:
|
||||
After replacing the code, add the following to the top of `pages/index.tsx`:
|
||||
|
||||
```js title="src/App.jsx (add to top)"
|
||||
```js title="src/index.tsx (add to top)"
|
||||
"use client";
|
||||
```
|
||||
|
||||
@ -535,7 +540,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npm run start
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -566,7 +571,7 @@ export, the first `TABLE` child element can be parsed with [`table_to_book`](/do
|
||||
generate a workbook object.
|
||||
|
||||
```jsx title="src/SheetJSReactHTML.js"
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { read, utils, writeFileXLSX } from 'xlsx';
|
||||
|
||||
export default function SheetJSReactHTML() {
|
||||
@ -615,7 +620,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | ViteJS | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.2.0` | `5.1.6` | 2024-03-13 |
|
||||
| `18.3.1` | `6.0.1` | 2024-12-13 |
|
||||
|
||||
:::
|
||||
|
||||
@ -671,6 +676,12 @@ This demo was tested in the following environments:
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
CRA has known compatibility issues with React 19+[^cra]. CRA no longer receives updates and the ReactJS docs no longer recommend using CRA. For new projects, it is strongly recommended to use ViteJS with the react or react-ts templates.
|
||||
|
||||
:::
|
||||
|
||||
1) Create a new site:
|
||||
|
||||
```bash
|
||||
@ -682,6 +693,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-react
|
||||
npm i
|
||||
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact # fixes CRA dependency conflicts w/ React 19
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm start`}
|
||||
</CodeBlock>
|
||||
|
||||
@ -24,10 +24,10 @@ This demo was verified by NetSuite consultants in the following deployments:
|
||||
|
||||
| `@NScriptType` | `@NApiVersion` | Date |
|
||||
|:----------------|:---------------|:-----------|
|
||||
| ScheduledScript | 2.1 | 2024-05-01 |
|
||||
| Restlet | 2.1 | 2024-05-01 |
|
||||
| Suitelet | 2.1 | 2024-05-01 |
|
||||
| MapReduceScript | 2.1 | 2024-05-01 |
|
||||
| ScheduledScript | 2.1 | 2024-12-06 |
|
||||
| Restlet | 2.1 | 2024-12-06 |
|
||||
| Suitelet | 2.1 | 2024-12-06 |
|
||||
| MapReduceScript | 2.1 | 2024-12-06 |
|
||||
|
||||
:::
|
||||
|
||||
@ -66,17 +66,23 @@ It is strongly recommended to keep the original filename `xlsx.full.min.js`.
|
||||
#### JSON Configuration
|
||||
|
||||
Assuming the uploaded file was named `xlsx.full.min.js`, the `paths` object in
|
||||
the JSON configuration should reference `xlsx.full.min`. The reference can be
|
||||
the JSON configuration should reference `xlsx.full.min.js`. The reference can be
|
||||
absolute or relative[^4].
|
||||
|
||||
:::note pass
|
||||
|
||||
On older versions of SuiteScript, you might need to use without `.js` extension.
|
||||
|
||||
:::
|
||||
|
||||
For example, if the script `xlsx.full.min.js` was placed in the `SuiteScripts`
|
||||
top-level directory, the config should use `"/SuiteScripts/xlsx.full.min"`:
|
||||
top-level directory, the config should use `"/SuiteScripts/xlsx.full.min.js"`:
|
||||
|
||||
```json title="JsLibraryConfig.json"
|
||||
{
|
||||
"paths": {
|
||||
// highlight-next-line
|
||||
"xlsx": "/SuiteScripts/xlsx.full.min"
|
||||
"xlsx": "/SuiteScripts/xlsx.full.min.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -88,7 +94,7 @@ folder, the config can use `"./xlsx.full.min"`:
|
||||
{
|
||||
"paths": {
|
||||
// highlight-next-line
|
||||
"xlsx": "./xlsx.full.min"
|
||||
"xlsx": "./xlsx.full.min.js"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user