From ad00a8fa3c5721826f8b66e5680a23342d732562 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Wed, 25 Jan 2023 03:25:06 -0500 Subject: [PATCH] android --- docz/docs/02-getting-started/02-example.mdx | 102 +++++++++++++++++--- 1 file changed, 88 insertions(+), 14 deletions(-) diff --git a/docz/docs/02-getting-started/02-example.mdx b/docz/docs/02-getting-started/02-example.mdx index c448c07..d8c73d5 100644 --- a/docz/docs/02-getting-started/02-example.mdx +++ b/docz/docs/02-getting-started/02-example.mdx @@ -532,12 +532,6 @@ dialog box. After selecting a path, the app will write the file. -:::caution - -This demo runs in iOS and requires a Macintosh computer with Xcode installed. - -::: - :::note Initial Setup Follow the [Environment Setup](https://reactnative.dev/docs/environment-setup) @@ -552,14 +546,6 @@ npx react-native init SheetJSPres --version="0.70.6" cd SheetJSPres npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-native-blob-util@0.17.1 - -mkdir -p patches -curl -L -o patches/react-native+0.70.6.patch https://github.com/facebook/react-native/files/10356761/react-native%2B0.70.6.patch -npx patch-package - -cd ios -pod install -cd .. ``` Save the following to `App.js` in the project: @@ -623,6 +609,91 @@ const App = () => ( export default App; ``` + + + +:::note + +The Android demo has been tested in Windows 10 and in macOS. + +::: + +Test the app in the Android simulator: + +```bash +npm run android +``` + +After clicking "Press to Export", the app will show an alert with the location +to the generated file. + +In the Android simulator, pulling the file requires additional steps. This +command will pull a Base64-encoded string from the simulator: + +```bash +adb exec-out run-as com.sheetjspres base64 files/Presidents.xlsx > pres.b64 +``` + +Decoding the file requires an OS-specific command: + + + + +```powershell +certutil -decode .\pres.b64 .\Presidents.xlsx +``` + + + + +```bash +base64 -D pres.b64 > Presidents.xlsx +``` + + + + +This command generates `Presidents.xlsx` which can be opened. + +:::note Device Testing + +For testing on a real device, Android 10+ requires an additional step to access +the generated file. Add highlighted lines to `App.js`: + +```jsx title="App.js" + /* write buffer to file */ + const filename = RNFetchBlob.fs.dirs.DocumentDir + "/Presidents.xlsx"; + await RNFetchBlob.fs.writeFile(filename, Array.from(buf), 'ascii'); +// highlight-start + await RNFetchBlob.MediaCollection.copyToMediaStore({ + parentFolder: "", + mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + name: "Presidents.xlsx" + }, "Download", filename); +// highlight-end + + return filename; +``` + +`Presidents.xlsx` will be copied to the `Downloads` folder. + +::: + + + + +:::caution + +This demo runs in iOS and requires a Macintosh computer with Xcode installed. + +::: + +The native component must be linked: + +```bash +cd ios; pod install; cd .. +``` + Test the app in the iOS simulator: ```bash @@ -632,5 +703,8 @@ npm run ios After clicking "Press to Export", the app will show an alert with the location to the generated file. + + + \ No newline at end of file