docs.sheetjs.com/05-capacitor.md at 4db5b76501dda465560a6becb61e7a88cf86f47f

Tinywan/docs.sheetjs.com

Fork 0

forked from sheetjs/docs.sheetjs.com

SheetJS 4db5b76501 synthetic-dom

2023-09-11 00:44:15 -04:00

5.9 KiB

Raw Blame History

title

pagination_prev

pagination_next

sidebar_position

sidebar_custom_props

CapacitorJS

demos/static/index

demos/desktop/index

summary
JS + Web View

import current from '/version.js'; import CodeBlock from '@theme/CodeBlock';

The NodeJS Module can be imported from the main entrypoint or any script in the project.

The "Complete Example" creates an app that looks like the screenshots below:

iOS	Android

:::warning Telemetry

Before starting this demo, manually disable telemetry. On Linux and MacOS:

npx @capacitor/cli telemetry off

To verify telemetry was disabled:

npx @capacitor/cli telemetry

:::

Integration Details

This example uses Svelte, but the same principles apply to other frameworks.

Reading data

The standard HTML5 File Input element logic works in CapacitorJS:

<script>
import { read, utils } from 'xlsx';

let html = "";

/* show file picker, read file, load table */
async function importFile(evt) {
  // highlight-start
  const f = evt.target.files[0];
  const wb = read(await f.arrayBuffer());
  // highlight-end
  const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
  html = utils.sheet_to_html(ws); // generate HTML and update state
}
</script>

<main>
  <!-- highlight-next-line -->
  <input type="file" on:change={importFile}/>
  <div bind:this={tbl}>{@html html}</div>
</main>

Writing data

@capacitor/filesystem can write Base64 strings:

<script>
import { Filesystem, Directory } from '@capacitor/filesystem';
import { utils, writeXLSX } from 'xlsx';

let html = "";
let tbl;

/* get state data and export to XLSX */
async function exportFile() {
  const elt = tbl.getElementsByTagName("TABLE")[0];
  const wb = utils.table_to_book(elt);
  /* generate Base64 string for Capacitor */
  // highlight-start
  const data = writeXLSX(wb, { type: "base64" });
  await Filesystem.writeFile({
    data,
    path: "SheetJSCap.xlsx",
    directory: Directory.Documents
  }); // write file
  // highlight-end
}

</script>

<main>
  <button on:click={exportFile}>Export XLSX</button>
  <div bind:this={tbl}>{@html html}</div>
</main>

Demo

:::note

The Android demo was last tested on 2023 September 03 with CapacitorJS 5.3.0 and filesystem 5.1.3 on an emulated Pixel 3 + Android 13 ("Tiramisu") API 33.

The iOS demo was last tested on 2023 September 03 with CapacitorJS 5.3.0 and filesystem 5.1.3 on an emulated iPhone SE (3rd generation) + iOS 16.4.

:::

Base Project

Follow the official "Environment Setup"¹ instructions to set up Android and iOS targets

:::caution pass

iOS development is only supported on macOS.

:::

Installation Notes (click to show)

CapacitorJS requires Java 17.

Disable telemetry.

npx @capacitor/cli telemetry off

Verify that telemetry is disabled by running

npx @capacitor/cli telemetry

(it should print Telemetry is off)

Create a new Svelte project:

npm create vite@latest sheetjs-cap -- --template svelte
cd sheetjs-cap

Install dependencies:

{\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz npm i --save @capacitor/core @capacitor/cli @capacitor/filesystem}

Create CapacitorJS structure:

npx cap init sheetjs-cap com.sheetjs.cap --web-dir=dist
npm run build

Download src/App.svelte and replace:

curl -o src/App.svelte -L https://docs.sheetjs.com/cap/App.svelte

Android

Create Android app

npm i --save @capacitor/android
npx cap add android

Enable file reading and writing in the Android app.

The following lines must be added to android/app/src/main/AndroidManifest.xml after the Permissions comment:

    <!-- Permissions -->

<!-- highlight-start -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<!-- highlight-end -->

    <uses-permission android:name="android.permission.INTERNET" />

Run the app in the simulator

npm run build
npx cap sync
npx cap run android

Test the app

Open the app and observe that presidents are listed in the table.

Touch "Export XLSX" and the emulator will ask for permission:

Tap "Allow" and a popup will be displayed with a path.

To see the generated file, switch to the "Files" app in the simulator, tap the ≡ icon and tap "Documents". Tap "Documents" folder to find SheetJSCap.xlsx.

iOS

Create iOS app

npm i --save @capacitor/ios
npx cap add ios

Enable file sharing and make the documents folder visible in the iOS app. The following lines must be added to ios/App/App/Info.plist:

<plist version="1.0">
<dict>
<!-- highlight-start -->
  <key>UIFileSharingEnabled</key>
  <true/>
  <key>LSSupportsOpeningDocumentsInPlace</key>
  <true/>
<!-- highlight-end -->
  <key>CFBundleDevelopmentRegion</key>

(The root element of the document is plist and it contains one dict child)

Run the app in the simulator

npm run build
npx cap sync
npx cap run ios

Test the app