create-vue

This commit is contained in:
SheetJS 2022-11-03 17:14:12 -04:00
parent f7d9712b24
commit f2b446f631
5 changed files with 124 additions and 5 deletions

@ -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.

@ -111,6 +111,42 @@ function exportFile() {
</template>
```
<details><summary><b>How to run the example</b> (click to show)</summary>
:::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.
</details>
### HTML
The main disadvantage of the Array of Objects approach is the specific nature
@ -149,11 +185,47 @@ function exportFile() {
</script>
<template>
<div v-html="html"></div>
<div ref="tableau" v-html="html"></div>
<button @click="exportFile">Export XLSX</button>
</template>
```
<details><summary><b>How to run the example</b> (click to show)</summary>
:::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.
</details>
### Rows and Columns
Some data grids and UI components split worksheet state in two parts: an array

@ -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:

@ -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.
<details><summary><b>Upgrade Note</b> (click to show)</summary>
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.
</details>
#### "Aw Snap!" or "Oops, an error has occurred!"
Browsers have strict memory limits and large spreadsheets can exceed the limits.

@ -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/' },