examples/reactjs-legacy
1
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

version bump 0.11.19: browser writeFile

Browse Source 
- IE6-9 ActiveX + VBScript shim
- `writeFile` supported in browser
- `oldie` demo for IE write strategies
This commit is contained in:
SheetJS 2018-02-03 15:46:32 -05:00
parent cbaa700dec
commit e9a7a4bde7
7 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

4
Makefile
View File

@ -4,8 +4,9 @@ react: ## Simple server for react and clones
.PHONY: next
next: init ## next.js demo
mkdir -p pages
mkdir -p pages static
cat nexthdr.js sheetjs.jsx > pages/sheetjs.js
cp ../../shim.js static/shim.js
next
.PHONY: native
@ -24,4 +25,3 @@ android: native ## react-native android sim
init: ## set up node_modules and symlink
mkdir -p node_modules
cd node_modules; if [ ! -e xlsx ]; then ln -s ../../../ xlsx; fi; cd -
if [ ! -e node_modules/file-saver ]; then npm install file-saver; fi

2
index.html
View File

@ -9,8 +9,8 @@
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="node_modules/xlsx/dist/shim.min.js"></script>
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/FileSaver.js"></script>
<style>body, #app { height: 100%; };</style>
</head>
<body>

1
nexthdr.js
View File

@ -1,3 +1,2 @@
/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

1
pages/index.js
View File

@ -6,6 +6,7 @@ export default () => (
<meta http-equiv="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>
<style jsx>{`
body, #app { height: 100%; };
`}</style>

8
preact.html
View File

@ -4,20 +4,20 @@
<html lang="en" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS React Demo</title>
<title>SheetJS Preact Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="//unpkg.com/preact"></script>
<script src="//unpkg.com/proptypes"></script>
<script src="//unpkg.com/preact-compat"></script>
<script>var React = preactCompat, ReactDOM = preactCompat;</script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/FileSaver.js"></script>
<script src="node_modules/xlsx/dist/shim.min.js"></script>
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
<style>body, #app { height: 100%; };</style>
</head>
<body>
<div class="container-fluid">
<h1><a href="http://sheetjs.com">SheetJS React Demo</a></h1>
<h1><a href="http://sheetjs.com">SheetJS Preact Demo</a></h1>
<br />
<a href="https://github.com/SheetJS/js-xlsx">Source Code Repo</a><br />
<a href="https://github.com/SheetJS/js-xlsx/issues">Issues? Something look weird? Click here and report an issue</a><br /><br />

17
sheetjs.jsx
View File

@ -18,10 +18,11 @@ class SheetJSApp extends React.Component {
handleFile(file/*:File*/) {
/* Boilerplate to set up FileReader */
const reader = new FileReader();
const rABS = !!reader.readAsBinaryString;
reader.onload = (e) => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, {type:'binary'});
const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'});
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
@ -30,17 +31,15 @@ class SheetJSApp extends React.Component {
/* Update state */
this.setState({ data: data, cols: make_cols(ws['!ref']) });
};
reader.readAsBinaryString(file);
if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file);
};
exportFile() {
/* convert state to workbook */
const ws = XLSX.utils.aoa_to_sheet(this.state.data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
/* generate XLSX file */
const wbout = XLSX.write(wb, {type:"array", bookType:"xlsx"});
/* send to client */
saveAs(new Blob([wbout],{type:"application/octet-stream"}), "sheetjs.xlsx");
/* generate XLSX file and send to client */
XLSX.writeFile(wb, "sheetjs.xlsx")
};
render() { return (
<DragDropFile handleFile={this.handleFile}>
@ -137,4 +136,8 @@ const SheetJSFT = [
].map(function(x) { return "." + x; }).join(",");
/* 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}));
const make_cols = refstr => {
let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1;
for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i}
return o;
};