forked from sheetjs/docs.sheetjs.com
create-vue
This commit is contained in:
parent
f7d9712b24
commit
f2b446f631
@ -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/' },
|
||||
|
Loading…
Reference in New Issue
Block a user