From 87143327fa83158023f4a6887641f8d4a90e8619 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Sun, 2 Jul 2023 21:06:45 -0400 Subject: [PATCH] step4 --- README.md | 36 +++++++++++++++++++++++++++++++++++- index.js | 21 +++++++++++++++++++++ ios/Podfile.lock | 10 ++++++++-- package.json | 1 + 4 files changed, 65 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3fe1f7a..307dde2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,37 @@ # SheetJS + React Native Demo -Complete Reproduction of \ No newline at end of file +Complete Reproduction of + +This branch (`RNFB`) demonstrates `rn-fetch-blob`. + +## Installation + +1) Install dependencies: + +```bash +npm i +``` + +### iOS + +2) (iOS only) link iOS project + +```bash +cd ios; pod install; cd .. +``` + +3) run the development process: + +```bash +npx react-native run-ios +``` + +### Android + +4) ensure Java 11 is the current version + +5) run the development process: + +```bash +npx react-native run-android +``` diff --git a/index.js b/index.js index 41a3fbc..0557349 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,27 @@ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, Button, Alert, Image, ScrollView } from 'react-native'; import { Table, Row, Rows, TableWrapper } from 'react-native-table-component'; +import { read, write } from 'xlsx'; +import { pickSingle } from 'react-native-document-picker'; +import { Platform } from 'react-native'; +import RNFetchBlob from 'rn-fetch-blob'; + +async function pickAndParse() { + const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" }); + let path = f.fileCopyUri; + if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/"); + const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72 + // const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72 + return read(new Uint8Array(res), {type: 'buffer'}); +} + +async function writeWorkbook(wb) { + const wbout = write(wb, {type:'buffer', bookType:"xlsx"}); + const file = RNFetchBlob.fs.dirs.DocumentDir + "/sheetjsw.xlsx"; + await RNFetchBlob.fs.writeFile(file, Array.from(wbout), 'ascii'); + return file; +} + const make_width = ws => { const aoa = utils.sheet_to_json(ws, {header:1}), res = []; aoa.forEach((r) => { r.forEach((c, C) => { res[C] = Math.max(res[C]||60, String(c).length * 10); }); }); diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 36ab9ee..2acb4e1 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -374,7 +374,7 @@ PODS: - React-jsinspector (0.72.1) - React-logger (0.72.1): - glog - - react-native-document-picker (8.2.0): + - react-native-document-picker (8.2.1): - React-Core - React-NativeModulesApple (0.72.1): - hermes-engine @@ -486,6 +486,8 @@ PODS: - React-jsi (= 0.72.1) - React-logger (= 0.72.1) - React-perflogger (= 0.72.1) + - rn-fetch-blob (0.12.0): + - React-Core - SocketRocket (0.6.1) - Yoga (1.14.0) - YogaKit (1.18.1): @@ -555,6 +557,7 @@ DEPENDENCIES: - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`) - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - rn-fetch-blob (from `../node_modules/rn-fetch-blob`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -654,6 +657,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/react/utils" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + rn-fetch-blob: + :path: "../node_modules/rn-fetch-blob" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -691,7 +696,7 @@ SPEC CHECKSUMS: React-jsiexecutor: 184eae1ecdedc7a083194bd9ff809c93f08fd34c React-jsinspector: d0b5bfd1085599265f4212034321e829bdf83cc0 React-logger: b8103c9b04e707b50cdd2b1aeb382483900cbb37 - react-native-document-picker: 495c444c0c773c6e83a5d91165890ecb1c0a399a + react-native-document-picker: 69ca2094d8780cfc1e7e613894d15290fdc54bba React-NativeModulesApple: 4f31a812364443cee6ef768d256c594ad3b20f53 React-perflogger: 3d501f34c8d4b10cb75f348e43591765788525ad React-RCTActionSheet: f5335572c979198c0c3daff67b07bd1ad8370c1d @@ -709,6 +714,7 @@ SPEC CHECKSUMS: React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd React-utils: 0a70ea97d4e2749f336b450c082905be1d389435 ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b + rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/package.json b/package.json index 82bae7e..31ae7d9 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react-native": "0.72.1", "react-native-document-picker": "^8.2.0", "react-native-table-component": "^1.2.0", + "rn-fetch-blob": "^0.12.0", "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz" }, "devDependencies": {