sheetjs
/
sheetjs
24
Fork 25
Code Issues 177 Pull Requests 12 Wiki Activity

react demo avoid readAsBinaryString [ci skip]

This commit is contained in:
Jimmy Wärting 2021-08-29 23:06:22 +02:00
parent 7468f3b635
commit 36a1a4e9b8
6 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/react/.gitignore vendored
View File

@ -1,3 +1,4 @@
SheetJS
.next
static/shim.js
public/shim.js

4
demos/react/Makefile
View File

@ -4,9 +4,9 @@ react: init ## Simple server for react and clones
.PHONY: next
next: init ## next.js demo
mkdir -p pages static
mkdir -p pages public
cat nexthdr.js sheetjs.js > pages/sheetjs.js
cp ../../shim.js static/shim.js
cp ../../shim.js public/shim.js
next
.PHONY: native

1
demos/react/nexthdr.js
View File

@ -1,2 +1,3 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import React from 'react';

11
demos/react/pages/index.js
View File

@ -1,12 +1,12 @@
import Head from 'next/head'
import SheetJSApp from './sheetjs.js'
export default () => (
import SheetJSApp from './sheetjs'
const Index = () => (
<div>
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS React Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="/static/shim.js"></script>
<script src="/shim.js"></script>
<style jsx>{`
body, #app { height: 100%; };
`}</style>
@ -19,4 +19,5 @@ export default () => (
</div>
<SheetJSApp />
</div>
)
);
export default Index;

24
demos/react/react-native.js vendored
View File

@ -1,16 +1,16 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Alert,
Image,
ScrollView,
TouchableWithoutFeedback
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Alert,
Image,
ScrollView,
TouchableWithoutFeedback
} from 'react-native';
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
@ -78,7 +78,7 @@ export default class SheetJS extends Component {
}).catch((err) => { Alert.alert("exportFile Error", "Error " + err.message); });
};
render() {
render() {
return (
<ScrollView contentContainerStyle={styles.container} vertical={true}>
<Text style={styles.welcome}> </Text>
@ -105,7 +105,7 @@ export default class SheetJS extends Component {
</Table>
</ScrollView>
</ScrollView>
);
);
};
};

25
demos/react/sheetjs.js
View File

@ -11,11 +11,10 @@ function SheetJSApp() {
const handleFile = (file) => {
const reader = new FileReader();
const rABS = !!reader.readAsBinaryString;
reader.onload = (e) => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'});
const ab = e.target.result;
const wb = XLSX.read(ab, {type:'array'});
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
@ -25,7 +24,7 @@ function SheetJSApp() {
setData(data);
setCols(make_cols(ws['!ref']))
};
if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file);
reader.readAsArrayBuffer(file);
}
const exportFile = () => {
@ -70,9 +69,9 @@ function DragDropFile({ handleFile, children }) {
};
return (
<div
onDrop={handleDrop}
onDragEnter={suppress}
<div
onDrop={handleDrop}
onDragEnter={suppress}
onDragOver={suppress}
>
{children}
@ -97,12 +96,12 @@ function DataInput({ handleFile }) {
<div className="form-group">
<label htmlFor="file">Drag or choose a spreadsheet file</label>
<br />
<input
type="file"
className="form-control"
id="file"
accept={SheetJSFT}
onChange={handleChange}
<input
type="file"
className="form-control"
id="file"
accept={SheetJSFT}
onChange={handleChange}
/>
</div>
</form>