/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ /* 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 */ function SheetJSApp() { const [data, setData] = React.useState([]); const [cols, setCols] = React.useState([]); 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'}); /* Get first worksheet */ const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* Convert array of arrays */ const data = XLSX.utils.sheet_to_json(ws, {header:1}); /* Update state */ setData(data); setCols(make_cols(ws['!ref'])) }; if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file); } const exportFile = () => { /* convert state to workbook */ const ws = XLSX.utils.aoa_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "SheetJS"); /* generate XLSX file and send to client */ XLSX.writeFile(wb, "sheetjs.xlsx") }; return (
); } if(typeof module !== 'undefined') module.exports = SheetJSApp /* -------------------------------------------------------------------------- */ /* Simple HTML5 file drag-and-drop wrapper usage: ... handleFile(file:File):void; */ function DragDropFile({ handleFile, children }) { const suppress = (e) => { e.stopPropagation(); e.preventDefault(); }; const handleDrop = (e) => { e.stopPropagation(); e.preventDefault(); const files = e.dataTransfer.files; if(files && files[0]) handleFile(files[0]); }; return (
{children}
); } /* Simple HTML5 file input wrapper usage: handleFile(file:File):void; */ function DataInput({ handleFile }) { const handleChange = (e) => { const files = e.target.files; if(files && files[0]) handleFile(files[0]); }; return (

) } /* Simple HTML Table usage: data:Array >; cols:Array<{name:string, key:number|string}>; */ function OutTable({ data, cols }) { return (
{cols.map((c) => )} {data.map((r,i) => {cols.map(c => )} )}
{c.name}
{ r[c.key] }
); } /* list of supported file types */ const SheetJSFT = [ "xlsx", "xlsb", "xlsm", "xls", "xml", "csv", "txt", "ods", "fods", "uos", "sylk", "dif", "dbf", "prn", "qpw", "123", "wb*", "wq*", "html", "htm" ].map(x => `.${x}`).join(","); /* generate an array of column objects */ 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; };