This commit is contained in:
SheetJS 2023-11-13 06:17:25 -05:00
parent 848a1a1e4e
commit 073f8a3be3
10 changed files with 229 additions and 21 deletions

View File

@ -345,16 +345,23 @@ function exportFile() {
</template>
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
This demo was last run on 2023 August 27 using `vue@3.3.4`. When running
`npm init`, the package `create-vue@3.7.3` was installed.
:::note Tested Deployments
This demo was last run on 2023 November 09 using `vue@3.3.8`. When running
`npm init`, the package `create-vue@3.8.0` was installed.
:::
1) Run `npm init vue@latest -- sheetjs-vue --default`.
1) Create a new site:
```bash
npm init vue@latest -- sheetjs-vue --default
```
2) Install the SheetJS dependency and start the dev server:
@ -373,7 +380,7 @@ The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueAoA.xlsx`. There may be a delay
since Vite will try to optimize the SheetJS library on the fly.
5) Build the site:
5) Stop the dev server and build the site:
```bash
npm run build
@ -390,6 +397,58 @@ npx http-server dist
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="nuxt" value="NuxtJS">
:::note Tested Deployments
This demo was last run on 2023 November 09 using `vue@3.3.8`. When running
`npm init`, the package `nuxi@3.9.1` was installed.
:::
1) Create a new site:
```bash
npx nuxi@latest init sheetjs-nuxt --packageManager npm --no-install --no-gitInit
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-nuxt
npm i
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:3000`)
4) Replace `App.vue` with the `src/SheetJSVueAoO.vue` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueAoA.xlsx`.
5) Stop the dev server and build the site:
```bash
npm run generate
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server .output/public/
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
</Tabs>
</details>
### HTML
@ -440,16 +499,23 @@ function exportFile() {
</template>
```
<details open><summary><b>How to run the example</b> (click to show)</summary>
<details open><summary><b>How to run the example</b> (click to hide)</summary>
:::note
<Tabs groupId="starter">
<TabItem name="vite" value="ViteJS">
This demo was last run on 2023 August 27 using `vue@3.3.4`. When running
`npm init`, the package `create-vue@3.7.3` was installed.
:::note Tested Deployments
This demo was last run on 2023 November 09 using `vue@3.3.8`. When running
`npm init`, the package `create-vue@3.8.0` was installed.
:::
1) Run `npm init vue@latest -- sheetjs-vue --default`.
1) Create a new site:
```bash
npm init vue@latest -- sheetjs-vue --default
```
2) Install the SheetJS dependency and start the dev server:
@ -468,7 +534,7 @@ The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueHTML.xlsx`. There may be a delay
since Vite will try to optimize the SheetJS library on the fly.
5) Build the site:
5) Stop the dev server and build the site:
```bash
npm run build
@ -485,11 +551,42 @@ npx http-server dist
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="nuxt" value="NuxtJS">
5) Build the site:
:::note Tested Deployments
This demo was last run on 2023 November 09 using `vue@3.3.8`. When running
`npm init`, the package `nuxi@3.9.1` was installed.
:::
1) Create a new site:
```bash
npm run build
npx nuxi@latest init sheetjs-nuxt --packageManager npm --no-install --no-gitInit
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-nuxt
npm i
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:3000`)
4) Replace `src/App.vue` with the `src/SheetJSVueHTML.vue` example.
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSVueHTML.xlsx`.
5) Stop the dev server and build the site:
```bash
npm run generate
```
The generated site will be placed in the `dist` folder.
@ -497,12 +594,15 @@ The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
npx http-server .output/public/
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
</Tabs>
</details>
### Rows and Columns

View File

@ -18,7 +18,7 @@ data from spreadsheets.
This demo uses NuxtJS and SheetJS to pull data from a spreadsheet and display
the content in an HTML table.
:::info pass
:::note pass
There were breaking changes between VueJS 2.x and VueJS 3.x. Since many projects
still use VueJS 2.x, this demo includes examples for both versions of VueJS.
@ -31,6 +31,15 @@ Content v1 (paired with VueJS 2.x and NuxtJS 2.x)
The ["Nuxt Content v2"](#nuxt-content-v2) section explores "transformers" for
NuxtJS Content v2 (paired with VueJS 3.x and NuxtJS 3.x)
:::info pass
This demo focuses on server-side processing with NuxtJS and VueJS.
The [VueJS demo](/docs/demos/frontend/vue) includes examples of NuxtJS sites
that process spreadsheets in the browser.
:::
:::note
The following deployments were tested:

View File

@ -187,7 +187,7 @@ This demo was tested in the following environments:
| macOS 13.5.1 | x64 | `26.1.0` | 2023-09-03 |
| macOS 13.5.1 | ARM | `26.1.0` | 2023-09-03 |
| Windows 10 | x64 | `26.1.0` | 2023-09-03 |
| Windows 10 | ARM | `26.1.0` | 2023-09-24 |
| Windows 11 | ARM | `26.1.0` | 2023-09-24 |
| Linux (HoloOS) | x64 | `27.0.0` | 2023-10-11 |
| Linux (Debian) | ARM | `26.1.0` | 2023-09-03 |

View File

@ -291,7 +291,7 @@ async function exportFile(table_element) {
## Complete Example
:::note
:::note Tested Deployments
This demo was tested in the following environments:

View File

@ -35,7 +35,14 @@ generate variables for each column. A sample Stata session is shown below:
![Stata commands](pathname:///stata/commands.png)
:::note
:::info pass
This demo covers Stata extensions. For directly processing Stata DTA files, the
["Stata DTA Codec"](/docs/constellation/dta) works in the browser or NodeJS.
:::
:::note Tested Deployments
This demo was last tested by SheetJS users on 2023 November 05.

View File

@ -114,7 +114,7 @@ various SheetJS API functions.
## Complete Example
:::note
:::note Tested Deployments
This demo was tested in the following deployments:

View File

@ -0,0 +1,90 @@
---
title: Stata DTA File Processor
sidebar_label: Stata DTA Codec
hide_table_of_contents: true
---
<head>
<script src="/dta/dta.min.js"></script>
</head>
:::info pass
This discussion focuses on the Stata DTA codec. For integrating SheetJS in a
Stata extension, there is a [dedicated demo](/docs/demos/extensions/stata).
:::
[Stata](https://stata.com/) is a statistical software package. Econometricians
and social scientists have used Stata for data processing and statistical
analysis. Many legacy datasets are only available in Stata DTA data files.
The SheetJS DTA Codec enables websites and automated data pipelines to integrate
data from DTA files.
Source code and project documentation are hosted on the SheetJS git server at
<https://git.sheetjs.com/sheetjs/sheetjs/src/branch/master/packages/dta>
:::caution DTA support is considered experimental.
Great open source software grows with user tests and reports. Issues should be
reported to [the issue tracker](https://git.sheetjs.com/sheetjs/sheetjs/issues).
:::
## Live Demo
This demo fetches a [sample DTA file](pathname:///dta/pres.dta), parses the data
using the SheetJS DTA Codec and displays the data in an HTML table using the
`sheet_to_html` method[^1].
:::tip pass
The file input element can be used to parse a file on your computer.
**All work is performed in the web browser! Data never leaves your machine!**
If you find any unexpected results or errors in testing, please report an issue
at [the issue tracker](https://git.sheetjs.com/sheetjs/sheetjs/issues).
:::
```jsx live
function SheetJSDTA() {
const [__html, setHTML] = React.useState("");
const [text, setText] = React.useState("");
const process = (u8) => {
try {
/* Initial Setup */
if(typeof DTA == "undefined") return setText("ERROR: Reload this page!");
DTA.set_utils(XLSX.utils);
/* Parse DTA */
const wb = DTA.parse(u8);
/* Generate HTML */
setHTML(XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]));
setText("");
} catch(e) { setText("ERROR: " + (e && e.message || e)); }
};
React.useEffect(() => { (async() => {
/* Fetch file */
process(new Uint8Array(await (await fetch("/dta/pres.dta")).arrayBuffer()));
})(); }, []);
const goodstyle = { backgroundColor: "#C6EFCE", color: "#006100" };
const badstyle = { backgroundColor: "#FFC7CE", color: "#9C0006" };
return ( <>
{/* Import Button */}
<input type="file" onChange={async(e) => {
process(new Uint8Array(await e.target.files[0].arrayBuffer()));
}}/>
{text && <code style={/ERROR/.test(text)?badstyle:goodstyle}>{text}</code>}
<div dangerouslySetInnerHTML={{ __html }}/>
</> );
}
```
[^1]: See [`sheet_to_html` in "Utilities"](/docs/api/utilities/html#html-table-output)

View File

@ -141,7 +141,7 @@ const config = {
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: [ "visual-basic", "swift", "java", "csharp", "perl", "ruby", "cpp", "applescript", "liquid", "rust", "dart", "wolfram", "matlab" ],
additionalLanguages: [ "visual-basic", "swift", "java", "csharp", "perl", "ruby", "cpp", "applescript", "liquid", "rust", "dart", "wolfram", "matlab", "stata" ],
},
liveCodeBlock: {
playgroundPosition: 'top'

2
docz/static/dta/dta.min.js vendored Normal file

File diff suppressed because one or more lines are too long

BIN
docz/static/dta/pres.dta Normal file

Binary file not shown.