diff --git a/docz/docs/03-demos/07-worker.md b/docz/docs/03-demos/07-worker.md index 0a23022..bb00379 100644 --- a/docz/docs/03-demos/07-worker.md +++ b/docz/docs/03-demos/07-worker.md @@ -319,7 +319,7 @@ in the ["Large Datasets"](/docs/demos/stream#browser) demo. #### File System Access API -:::note +:::warning Browser Compatibility At the time of writing, the File System Access API is only available in Chromium and Chromium-based browsers like Chrome and Edge. diff --git a/docz/docs/03-demos/13-vue.md b/docz/docs/03-demos/13-vue.md index 25e672f..c13b92a 100644 --- a/docz/docs/03-demos/13-vue.md +++ b/docz/docs/03-demos/13-vue.md @@ -111,6 +111,42 @@ function exportFile() { ``` +
How to run the example (click to show) + +:::note + +This demo was last run on 2022 November 23 using `vue@3.2.41`. When running +`npm init`, the package `create-vue@3.4.0` was installed. + +::: + +1) Run `npm init vue@latest`. When prompted: + +- Project name: `SheetJSVue` +- Package name: `sheetjsvue` +- Add TypeScript? `No` (default) +- Add JSX Support? `No` (default) +- Add Vue Router for Single Page Application development? `No` (default) +- Add Pinia for state management? `No` (default) +- Add Vitest for Unit Testing? `No` (default) +- Add an End-to-End Testing Solution? `No` (default) +- Add ESLint for code quality? `No` (default) + +2) Install the SheetJS dependency and start the dev server: + +```bash +cd SheetJSVue +npm install +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm run dev +``` + +3) Open a web browser and access the displayed URL (`http://localhost:5173`) + +4) Replace `src/App.vue` with the `src/SheetJSVueAoO.vue` example. + +
+ ### HTML The main disadvantage of the Array of Objects approach is the specific nature @@ -149,11 +185,47 @@ function exportFile() { ``` +
How to run the example (click to show) + +:::note + +This demo was last run on 2022 November 23 using `vue@3.2.41`. When running +`npm init`, the package `create-vue@3.4.0` was installed. + +::: + +1) Run `npm init vue@latest`. When prompted: + +- Project name: `SheetJSVue` +- Package name: `sheetjsvue` +- Add TypeScript? `No` (default) +- Add JSX Support? `No` (default) +- Add Vue Router for Single Page Application development? `No` (default) +- Add Pinia for state management? `No` (default) +- Add Vitest for Unit Testing? `No` (default) +- Add an End-to-End Testing Solution? `No` (default) +- Add ESLint for code quality? `No` (default) + +2) Install the SheetJS dependency and start the dev server: + +```bash +cd SheetJSVue +npm install +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm run dev +``` + +3) Open a web browser and access the displayed URL (`http://localhost:5173`) + +4) Replace `src/App.vue` with the `src/SheetJSVueHTML.vue` example. + +
+ ### Rows and Columns Some data grids and UI components split worksheet state in two parts: an array diff --git a/docz/docs/08-api/09-utilities.md b/docz/docs/08-api/09-utilities.md index 3ff74fa..771d54e 100644 --- a/docz/docs/08-api/09-utilities.md +++ b/docz/docs/08-api/09-utilities.md @@ -434,10 +434,10 @@ try to interpret the text of each TD element. To override the conversion for a specific cell, the following data attributes can be added to the individual TD elements: -| Attribute | Description | -|:----------|:----------------------------------------------------------| +| Attribute | Description | +|:----------|:-------------------------------------------------------------| | `data-t` | Override [Cell Type](/docs/csf/cell#data-types) | -| `data-v` | Override Cell Value | +| `data-v` | Override Cell Value | | `data-z` | Override [Number Format](/docs/csf/features/#number-formats) | For example: diff --git a/docz/docs/09-miscellany/02-errors.md b/docz/docs/09-miscellany/02-errors.md index 9570a49..922f968 100644 --- a/docz/docs/09-miscellany/02-errors.md +++ b/docz/docs/09-miscellany/02-errors.md @@ -25,6 +25,52 @@ workarounds and solutions! ## Errors +#### Uncaught TypeError: Cannot read property of undefined + +Errors include + +``` +Uncaught TypeError: Cannot read property 'read' of undefined +Uncaught TypeError: Cannot read property 'writeFile' of undefined +Uncaught TypeError: Cannot read property 'utils' of undefined +``` + +The root cause is an undefined `XLSX` variable. This usually means the library +was not properly loaded. + +[Review the Installation instructions.](/docs/getting-started#installation) + +If the error shows up while using the latest version, projects may require +other configuration or loading strategies. + +
Upgrade Note (click to show) + +Older versions of the library only shipped with CommonJS and standalone script. +Webpack and other bundlers supported CommonJS dependencies with default import: + +```js +// old way +import XLSX from "xlsx"; +``` + +Newer versions of the library ship with an ESM build. When upgrading, imports +should be updated: + +```js +// new way +import * as XLSX from "xlsx"; +import * as cptable from "xlsx/dist/cpexcel.full.mjs"; +XLSX.set_cptable(cptable); +``` + +Newer releases support tree shaking, and special methods like `writeFileXLSX` +help reduce bundle size. + +[The bundler note](/docs/getting-started/installation/frameworks) explains in +further detail. + +
+ #### "Aw Snap!" or "Oops, an error has occurred!" Browsers have strict memory limits and large spreadsheets can exceed the limits. diff --git a/docz/docusaurus.config.js b/docz/docusaurus.config.js index 97d03a6..1017402 100644 --- a/docz/docusaurus.config.js +++ b/docz/docusaurus.config.js @@ -163,6 +163,7 @@ const config = { redirects: [ { from: '/docs/example', to: '/docs/getting-started/example' }, { from: '/docs/installation', to: '/docs/getting-started/' }, + { from: '/docs/interface', to: '/docs/api/' }, { from: '/docs/demos/excel', to: '/docs/demos/' }, { from: '/docs/getting-started/demos/', to: '/docs/demos/' }, { from: '/docs/getting-started/demos/excel', to: '/docs/demos/' },