Source Code Repo
diff --git a/react-native.js b/react-native.js
index fff0f68..682ad7d 100644
--- a/react-native.js
+++ b/react-native.js
@@ -1,13 +1,24 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
-
import * as XLSX from 'xlsx';
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Button, Alert, Image } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
-import { writeFile, readFile, DocumentDirectoryPath } from 'react-native-fs'
+// react-native-fs
+import { writeFile, readFile, DocumentDirectoryPath } from 'react-native-fs';
const DDP = DocumentDirectoryPath + "/";
+const input = res => res;
+const output = str => str;
+
+// react-native-fetch-blob
+/*
+import RNFetchBlob from 'react-native-fetch-blob';
+const { writeFile, readFile, dirs:{ DocumentDir } } = RNFetchBlob.fs;
+const DDP = DocumentDir + "/";
+const input = res => res.map(x => String.fromCharCode(x)).join("");
+const output = str => str.split("").map(x => x.charCodeAt(0));
+*/
const make_cols = refstr => Array.from({length: XLSX.utils.decode_range(refstr).e.c + 1}, (x,i) => XLSX.utils.encode_col(i));
@@ -26,22 +37,32 @@ export default class SheetJS extends Component {
{text: 'Cancel', onPress: () => {}, style: 'cancel' },
{text: 'Import', onPress: () => {
readFile(DDP + "sheetjs.xlsx", 'ascii').then((res) => {
- const wb = XLSX.read(res, {type:'binary'});
+ /* parse file */
+ const wb = XLSX.read(input(res), {type:'binary'});
+
+ /* convert first worksheet to AOA */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws, {header:1});
+
+ /* update state */
this.setState({ data: data, cols: make_cols(ws['!ref']) });
}).catch((err) => { Alert.alert("importFile Error", "Error " + err.message); });
}}
]);
}
exportFile() {
+ /* convert AOA back to worksheet */
const ws = XLSX.utils.aoa_to_sheet(this.state.data);
+
+ /* build new workbook */
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
- const wbout = XLSX.write(wb, {type:"binary", bookType:"xlsx"});
+
+ /* write file */
+ const wbout = XLSX.write(wb, {type:'binary', bookType:"xlsx"});
const file = DDP + "sheetjsw.xlsx";
- writeFile(file, wbout, 'ascii').then((res) =>{
+ writeFile(file, output(wbout), 'ascii').then((res) =>{
Alert.alert("exportFile success", "Exported to " + file);
}).catch((err) => { Alert.alert("exportFile Error", "Error " + err.message); });
};
diff --git a/sheetjs.jsx b/sheetjs.jsx
index bc3fc55..f5c5bc1 100644
--- a/sheetjs.jsx
+++ b/sheetjs.jsx
@@ -1,95 +1,16 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
-const SheetJSFT = [
- "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm"
-].map(function(x) { return "." + x; }).join(",");
-
-/*
- Simple HTML5 file drag-and-drop wrapper
- usage:
...
- handleFile(file:File):void;
+/* Notes:
+ - usage: `ReactDOM.render(
, document.getElementById('app') );`
+ - xlsx.full.min.js is loaded in the head of the HTML page
+ - this script should be referenced with type="text/babel"
+ - babel.js in-browser transpiler should be loaded before this script
*/
-class DragDropFile extends React.Component {
- constructor(props) {
- super(props);
- this.onDrop = this.onDrop.bind(this);
- };
- suppress(evt) { evt.stopPropagation(); evt.preventDefault(); };
- onDrop(evt) { evt.stopPropagation(); evt.preventDefault();
- const files = evt.dataTransfer.files;
- if(files && files[0]) this.props.handleFile(files[0]);
- };
- render() { return (
-
- {this.props.children}
-
- ); };
-};
-
-/*
- Simple HTML5 file input wrapper
- usage:
- handleFile(file:File):void;
-*/
-class DataInput extends React.Component {
- constructor(props) {
- super(props);
- this.handleChange = this.handleChange.bind(this);
- };
- handleChange(e) {
- const files = e.target.files;
- if(files && files[0]) this.props.handleFile(files[0]);
- };
- render() { return (
-
- ); };
-}
-
-/* generate an array of column objects */
-const make_cols = refstr => Array(XLSX.utils.decode_range(refstr).e.c + 1).fill(0).map((x,i) => ({name:XLSX.utils.encode_col(i), key:i}));
-
-/*
- Simple HTML Table
- usage:
- data:Array
>;
- cols:Array<{name:string, key:number|string}>;
-*/
-class OutTable extends React.Component {
- constructor(props) { super(props); };
- render() { return (
-
-
-
- {this.props.cols.map((c) => | {c.name} | )}
-
-
- {this.props.data.map(r =>
- {this.props.cols.map(c => | { r[c.key] } | )}
-
)}
-
-
-
+ {this.props.children}
+
+ ); };
+};
+
+/*
+ Simple HTML5 file input wrapper
+ usage:
+ handleFile(file:File):void;
+*/
+class DataInput extends React.Component {
+ constructor(props) {
+ super(props);
+ this.handleChange = this.handleChange.bind(this);
+ };
+ handleChange(e) {
+ const files = e.target.files;
+ if(files && files[0]) this.props.handleFile(files[0]);
+ };
+ render() { return (
+
+ ); };
+}
+
+/*
+ Simple HTML Table
+ usage:
+ data:Array >;
+ cols:Array<{name:string, key:number|string}>;
+*/
+class OutTable extends React.Component {
+ constructor(props) { super(props); };
+ render() { return (
+
+
+
+ {this.props.cols.map((c) => | {c.name} | )}
+
+
+ {this.props.data.map((r,i) =>
+ {this.props.cols.map(c => | { r[c.key] } | )}
+
)}
+
+
+