forked from sheetjs/docs.sheetjs.com
Flutter Mobile demo refresh
This commit is contained in:
parent
55ce74bf8c
commit
201f3d48fc
@ -40,6 +40,24 @@ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`
|
||||
yarn remove xlsx
|
||||
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
Newer releases of Yarn may throw an error:
|
||||
|
||||
```
|
||||
Usage Error: It seems you are trying to add a package using a https:... url; we now require package names to be explicitly specified.
|
||||
Try running the command again with the package name prefixed: yarn add my-package@https:...
|
||||
```
|
||||
|
||||
The workaround is to prepend the URL with `xlsx@`:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add xlsx@https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@ -67,7 +85,7 @@ Snyk security tooling may report errors involving "Prototype Pollution":
|
||||
Prototype Pollution [Medium Severity][https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926]
|
||||
```
|
||||
|
||||
As noted in the [Snyk report](https://web.archive.org/web/20231129100639/https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
|
||||
As noted in the [Snyk report](https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
|
||||
|
||||
> The issue is resolved in version 0.19.3
|
||||
|
||||
@ -176,6 +194,23 @@ pnpm install --save file:vendor/xlsx-${current}.tgz`}
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add file:vendor/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
Newer releases of Yarn may throw an error:
|
||||
|
||||
```
|
||||
Usage Error: The file:vendor/xlsx-0.20.2.tgz string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?
|
||||
```
|
||||
|
||||
The workaround is to prepend the URI with `xlsx@`:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add xlsx@file:vendor/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
@ -38,6 +38,24 @@ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`
|
||||
yarn remove xlsx
|
||||
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
Newer releases of Yarn may throw an error:
|
||||
|
||||
```
|
||||
Usage Error: It seems you are trying to add a package using a https:... url; we now require package names to be explicitly specified.
|
||||
Try running the command again with the package name prefixed: yarn add my-package@https:...
|
||||
```
|
||||
|
||||
The workaround is to prepend the URL with `xlsx@`:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add xlsx@https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@ -57,7 +75,7 @@ Snyk security tooling may report errors involving "Prototype Pollution":
|
||||
Prototype Pollution [Medium Severity][https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926]
|
||||
```
|
||||
|
||||
As noted in the [Snyk report](https://web.archive.org/web/20231129100639/https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
|
||||
As noted in the [Snyk report](https://security.snyk.io/vuln/SNYK-JS-XLSX-5457926):
|
||||
|
||||
> The issue is resolved in version 0.19.3
|
||||
|
||||
@ -165,6 +183,23 @@ pnpm install --save file:vendor/xlsx-${current}.tgz`}
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add file:vendor/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
Newer releases of Yarn may throw an error:
|
||||
|
||||
```
|
||||
Usage Error: The file:vendor/xlsx-0.20.2.tgz string didn't match the required format (package-name@range). Did you perhaps forget to explicitly reference the package name?
|
||||
```
|
||||
|
||||
The workaround is to prepend the URI with `xlsx@`:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add xlsx@file:vendor/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
@ -34,10 +34,10 @@ models and data flow strategies.
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Version | Date |
|
||||
|:------------------|:-----------|
|
||||
| `1.8.2` (latest) | 2023-12-04 |
|
||||
| `1.2.32` (legacy) | 2023-12-04 |
|
||||
| Browser | Version | Date |
|
||||
|:-------------|:------------------|:-----------|
|
||||
| Chromiun 125 | `1.8.2` (latest) | 2024-06-09 |
|
||||
| Chromium 125 | `1.2.32` (legacy) | 2024-06-09 |
|
||||
|
||||
:::
|
||||
|
||||
@ -238,7 +238,7 @@ $scope.exportSheetJS = function() {
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary><b>Complete Example</b> (click to show)</summary>
|
||||
<summary open><b>How to run the example</b> (click to hide)</summary>
|
||||
|
||||
1) Save the following to `index.html`:
|
||||
|
||||
@ -291,6 +291,10 @@ app.controller('sheetjs', function($scope, $http) {
|
||||
2) Start a local web server with `npx http-server .` and access the displayed
|
||||
URL with a web browser (typically `http://localhost:8080`)
|
||||
|
||||
When the page loads, the app will fetch https://docs.sheetjs.com/pres.xlsx and
|
||||
store an array of objects in state. When the "Export Table" button is clicked,
|
||||
a worksheet is created and exported to XLSX.
|
||||
|
||||
</details>
|
||||
|
||||
### HTML
|
||||
@ -340,7 +344,7 @@ The HTML table can be directly exported with [`table_to_book`](/docs/api/utiliti
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary><b>Complete Example</b> (click to show)</summary>
|
||||
<summary open><b>How to run the example</b> (click to hide)</summary>
|
||||
|
||||
1) Save the following to `index.html`:
|
||||
|
||||
@ -386,6 +390,10 @@ app.controller('sheetjs', function($scope, $http) {
|
||||
2) Start a local web server with `npx http-server .` and access the displayed
|
||||
URL with a web browser (typically `http://localhost:8080`)
|
||||
|
||||
When the page loads, the app will fetch https://docs.sheetjs.com/pres.xlsx and
|
||||
store the HTML string in state. When the "Export Table" button is clicked, a
|
||||
worksheet is created and exported to XLSX.
|
||||
|
||||
</details>
|
||||
|
||||
[^1]: See [`$http`](https://docs.angularjs.org/api/ng/service/$http) in the AngularJS documentation.
|
||||
|
||||
@ -26,7 +26,11 @@ user-supplied sheets and exports data to XLSX workbooks:
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested on 2023 December 04 with Glide Data Grid 5.3.2
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Browser | Version | Date |
|
||||
|:-------------|:--------|:-----------|
|
||||
| Chromiun 125 | `5.3.2` | 2024-06-09 |
|
||||
|
||||
:::
|
||||
|
||||
@ -384,7 +388,8 @@ values should be 41, 42, 43, 44, and 45, as shown in the screenshot below:
|
||||
|
||||
|
||||
|
||||
7) Click on the "Export" button to create a XLSX file (`sheetjs-gdg.xlsx`).
|
||||
7) Click on the "Export" button. The browser should attempt to download a XLSX
|
||||
file (`sheetjs-gdg.xlsx`). Save the file.
|
||||
|
||||
Open the generated file and verify the contents match the grid.
|
||||
|
||||
|
||||
@ -28,15 +28,15 @@ This demo was tested in the following environments:
|
||||
|
||||
| Version | Date | Notes |
|
||||
|:----------------|:-----------|:---------------------|
|
||||
| `7.0.0-beta.19` | 2023-12-04 | |
|
||||
| `7.0.0-beta.41` | 2023-12-04 | Editing did not work |
|
||||
| `7.0.0-beta.19` | 2024-06-09 | |
|
||||
| `7.0.0-beta.44` | 2024-06-09 | Editing did not work |
|
||||
|
||||
:::
|
||||
|
||||
:::danger pass
|
||||
|
||||
When this demo was last tested, the grid correctly displayed data but could not
|
||||
be edited by the user.
|
||||
When this demo was last tested against the latest version, the grid correctly
|
||||
displayed data but data could not be edited by the user.
|
||||
|
||||
The current recommendation is to use version `7.0.0-beta.19`.
|
||||
|
||||
@ -50,7 +50,7 @@ installation with Yarn and other package managers.
|
||||
Using the `npm` tool, this command installs SheetJS and React Data Grid:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.19`}
|
||||
</CodeBlock>
|
||||
|
||||
Methods and components in both libraries can be loaded in pages using `import`:
|
||||
@ -146,17 +146,17 @@ function rdg_to_ws(rows: Row[]): WorkSheet {
|
||||
|
||||
## Demo
|
||||
|
||||
1) Create a new TypeScript `create-react-app` app:
|
||||
1) Create a new ViteJS app using the `react-ts` template:
|
||||
|
||||
```bash
|
||||
npx create-react-app sheetjs-rdg --template typescript
|
||||
npm create vite@latest -- sheetjs-rdg --template react-ts
|
||||
cd sheetjs-rdg
|
||||
```
|
||||
|
||||
2) Install dependencies:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.41`}
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid@7.0.0-beta.19`}
|
||||
</CodeBlock>
|
||||
|
||||
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
|
||||
@ -168,12 +168,24 @@ curl -L -o src/App.tsx https://docs.sheetjs.com/rdg/App.tsx
|
||||
4) Start the development server:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The terminal window will display a URL (typically `http://localhost:5173`).
|
||||
Open the URL with a web browser and confirm that a page loads.
|
||||
|
||||
#### Testing
|
||||
|
||||
5) When the page loads, it will fetch https://docs.sheetjs.com/pres.numbers,
|
||||
parse with SheetJS, and load the data in the data grid.
|
||||
5) Confirm the table shows a list of Presidents.
|
||||
|
||||
6) Click one of the "export" buttons to export the grid data to file.
|
||||
When the page loads, it will fetch https://docs.sheetjs.com/pres.numbers, parse
|
||||
with SheetJS, and load the data in the data grid.
|
||||
|
||||
6) Click the "export [.xlsx]" button to export the grid data to XLSX. It should
|
||||
attempt to download `SheetJSRDG.xlsx`.
|
||||
|
||||
7) Open the generated file in a spreadsheet editor. Set cell A7 to "SheetJS Dev"
|
||||
and set cell B7 to 47. Save the file.
|
||||
|
||||
8) Use the file picker to select the modified file. The table will refresh and
|
||||
show the new data.
|
||||
@ -10,6 +10,8 @@ sidebar_custom_props:
|
||||
---
|
||||
|
||||
import current from '/version.js';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
Dart[^1] + Flutter[^2] is a popular cross-platform app framework. JavaScript
|
||||
@ -45,15 +47,15 @@ This demo was tested in the following environments:
|
||||
|
||||
| OS | Device | Dart | Flutter | Date |
|
||||
|:-----------|:------------------|:--------|:---------|:-----------|
|
||||
| Android 29 | NVIDIA Shield | `3.2.2` | `3.16.2` | 2023-12-04 |
|
||||
| iOS 15.1 | iPad Pro | `3.2.2` | `3.16.2` | 2023-12-04 |
|
||||
| Android 30 | NVIDIA Shield | `3.4.3` | `3.22.2` | 2024-06-09 |
|
||||
| iOS 15.1 | iPad Pro | `3.4.3` | `3.22.2` | 2024-06-09 |
|
||||
|
||||
**Simulators**
|
||||
|
||||
| OS | Device | Dart | Flutter | Dev Platform | Date |
|
||||
|:-----------|:------------------|:--------|:---------|:-------------|:-----------|
|
||||
| Android 34 | Pixel 3a | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 |
|
||||
| iOS 17.0.1 | iPhone 15 Pro Max | `3.2.2` | `3.16.2` | `darwin-x64` | 2023-12-04 |
|
||||
| Android 34 | Pixel 3a | `3.4.3` | `3.22.2` | `darwin-x64` | 2024-06-09 |
|
||||
| iOS 17.5 | iPhone 15 Pro Max | `3.4.3` | `3.22.2` | `darwin-x64` | 2024-06-09 |
|
||||
|
||||
:::
|
||||
|
||||
@ -219,12 +221,31 @@ class SheetJSFlutterState extends State<SheetJSFlutter> {
|
||||
|
||||
Run `flutter doctor` and confirm the following items are checked:
|
||||
|
||||
<Tabs groupId="os">
|
||||
<TabItem value="linux" label="Linux">
|
||||
|
||||
```
|
||||
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
|
||||
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
|
||||
[✓] Android Studio (version 2022.3)
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="macos" label="macOS" default>
|
||||
|
||||
```
|
||||
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
|
||||
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```
|
||||
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
(the actual version numbers may differ)
|
||||
|
||||
<details open>
|
||||
@ -290,6 +311,22 @@ If Chromium is installed, the environment variable should be manually assigned:
|
||||
export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
|
||||
```
|
||||
|
||||
<Tabs groupId="os">
|
||||
<TabItem value="linux" label="Linux">
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="macos" label="macOS">
|
||||
|
||||
```bash
|
||||
export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::
|
||||
|
||||
</details>
|
||||
@ -297,17 +334,18 @@ export CHROME_EXECUTABLE=/Applications/Chromium.app/Contents/MacOS/Chromium
|
||||
Run `flutter emulators` and check for both `ios` and `android` emulators:
|
||||
|
||||
```
|
||||
apple_ios_simulator • iOS Simulator • Apple • ios
|
||||
Pixel_3a_API_34 • Pixel 3a API 34 • Google • android
|
||||
Id • Name • Manufacturer • Platform
|
||||
|
||||
apple_ios_simulator • iOS Simulator • Apple • ios
|
||||
Pixel_3a_API_34 • Pixel 3a API 34 • Google • android
|
||||
```
|
||||
|
||||
1) Disable telemetry.
|
||||
1) Disable telemetry. The following commands were confirmed to work:
|
||||
|
||||
```bash
|
||||
dart --disable-telemetry
|
||||
dart --disable-analytics
|
||||
flutter config --no-analytics
|
||||
flutter config --disable-telemetry
|
||||
```
|
||||
|
||||
### Base Project
|
||||
@ -453,9 +491,9 @@ flutter run
|
||||
The app fetches https://docs.sheetjs.com/pres.numbers, parses, converts data to
|
||||
an array of arrays, and presents the data in a Flutter `Table` widget.
|
||||
|
||||
:::caution pass
|
||||
:::info pass
|
||||
|
||||
When the demo was last run, there was a build error:
|
||||
In some demo runs, the build failed with an Android SDK error:
|
||||
|
||||
```
|
||||
│ The plugin flutter_js requires a higher Android SDK version. │
|
||||
@ -513,7 +551,7 @@ flutter devices
|
||||
The list should include the device:
|
||||
|
||||
```
|
||||
SheetJS (mobile) • 1234567890 • android-arm64 • Android 10 (API 29)
|
||||
SheetJS (mobile) • 726272627262726272 • android-arm64 • Android 11 (API 30)
|
||||
^^^^^^^--- the first column is the name
|
||||
```
|
||||
|
||||
@ -529,7 +567,9 @@ flutter build apk --release
|
||||
flutter install
|
||||
```
|
||||
|
||||
The script will ask for a device:
|
||||
:::note pass
|
||||
|
||||
The script may ask for a device:
|
||||
|
||||
```
|
||||
[1]: SheetJS (1234567890)
|
||||
@ -541,7 +581,9 @@ Please choose one (or "q" to quit):
|
||||
|
||||
Select the number corresponding to the device.
|
||||
|
||||
18) Launch the installed `sheetjs_flutter` app on the device
|
||||
:::
|
||||
|
||||
18) Launch the installed `sheetjs_flutter` app on the device.
|
||||
|
||||
:::caution pass
|
||||
|
||||
@ -564,7 +606,7 @@ flutter devices
|
||||
The list should include the device:
|
||||
|
||||
```
|
||||
SheetPad (mobile) • 00000000-0000000000000000 • ios • iOS 15.1 19B74
|
||||
SheetPad (mobile) • 00000000-0000000000000000 • ios • iOS 15.1 19B74
|
||||
^^^^^^^^--- the first column is the name
|
||||
```
|
||||
|
||||
@ -574,6 +616,55 @@ The list should include the device:
|
||||
flutter run -d SheetPad
|
||||
```
|
||||
|
||||
In debug mode, "Flutter tools" will attempt to connect to the running app. The
|
||||
device will ask for permission:
|
||||
|
||||
> "Sheetjs Flutter" would like to find and connect to devices on your local network.
|
||||
|
||||
Tap "OK" to continue.
|
||||
|
||||
:::caution pass
|
||||
|
||||
When this demo was last tested, the build failed with an error:
|
||||
|
||||
```text
|
||||
Could not build the precompiled application for the device.
|
||||
Error (Xcode): No profiles for 'com.example.sheetjsFlutter' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.example.sheetjsFlutter'. Automatic signing is disabled and unable to generate a profile. To enable automatic signing, pass -allowProvisioningUpdates to xcodebuild.
|
||||
```
|
||||
|
||||
The message includes a hint:
|
||||
|
||||
```
|
||||
Verify that the Bundle Identifier in your project is your signing id in Xcode
|
||||
open ios/Runner.xcworkspace
|
||||
```
|
||||
|
||||
Open the workspace and select the "Runner" project in the Navigator. In the main
|
||||
pane, select "Signing & Capabilities" and ensure a Team is selected. From
|
||||
the menu bar, select "Product" > "Run" to run the app.
|
||||
|
||||
:::
|
||||
|
||||
:::info pass
|
||||
|
||||
If there is an "Untrusted Developer" error, the certificate must be trusted on
|
||||
the device. The following steps were verified in iOS 15.1:
|
||||
|
||||
1) Open the "Settings" app on the device
|
||||
|
||||
In the "APPS FROM DEVELOPER" section of the new screen, "Sheetjs Flutter" should
|
||||
be displayed. If it is missing, tap the "<" button near the top of the screen
|
||||
and select a different certificate from the list.
|
||||
|
||||
2) Select "General" > "VPN & Device Management".
|
||||
|
||||
3) In the "DEVELOPER APP" section, tap the certificate that is "Not Trusted".
|
||||
|
||||
4) After confirming "Sheetjs Flutter" is in the list, tap the "Trust" button and
|
||||
tap "Trust" in the popup.
|
||||
|
||||
:::
|
||||
|
||||
[^1]: https://dart.dev/ is the official site for the Dart Programming Language.
|
||||
[^2]: https://flutter.dev/ is the official site for the Flutter Framework.
|
||||
[^3]: [The `flutter_js` package](https://pub.dev/packages/flutter_js) is hosted on the Dart package repository.
|
||||
|
||||
@ -23,7 +23,12 @@ spreadsheets into simple XLSX files for MATLAB.
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested by SheetJS users on 2023 November 27 in MATLAB R2023a.
|
||||
This demo was tested by SheetJS users in the following deployments:
|
||||
|
||||
| Architecture | Version | Date |
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | R2024a | 2024-06-09 |
|
||||
| `win10-x64` | R2024a | 2024-06-09 |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 80 KiB |
Loading…
Reference in New Issue
Block a user