From 3468395494c450ea8ba7e20afb1bd6127f516ccd Mon Sep 17 00:00:00 2001 From: SheetJS Date: Sun, 22 Mar 2020 21:57:53 -0400 Subject: [PATCH] x-spreadsheet demo --- README.md | 1 + bits/75_xlml.js | 2 +- demos/README.md | 1 + demos/xspreadsheet/README.md | 100 ++++++++++++++++ demos/xspreadsheet/index.html | 179 ++++++++++++++++++++++++++++ demos/xspreadsheet/shim.js | 1 + demos/xspreadsheet/xlsx.full.min.js | 1 + docbits/11_demos.md | 1 + misc/docs/README.md | 1 + xlsx.flow.js | 2 +- xlsx.js | 2 +- xlsx.mini.flow.js | 8 +- xlsx.mini.js | 8 +- 13 files changed, 302 insertions(+), 5 deletions(-) create mode 100644 demos/xspreadsheet/README.md create mode 100644 demos/xspreadsheet/index.html create mode 120000 demos/xspreadsheet/shim.js create mode 120000 demos/xspreadsheet/xlsx.full.min.js diff --git a/README.md b/README.md index 41e03a4..0af085f 100644 --- a/README.md +++ b/README.md @@ -215,6 +215,7 @@ The [`demos` directory](demos/) includes sample projects for: - [`Adobe ExtendScript`](demos/extendscript/) - [`Headless Browsers`](demos/headless/) - [`canvas-datagrid`](demos/datagrid/) +- [`x-spreadsheet`](demos/xspreadsheet/) - [`Swift JSC and other engines`](demos/altjs/) - [`"serverless" functions`](demos/function/) - [`internet explorer`](demos/oldie/) diff --git a/bits/75_xlml.js b/bits/75_xlml.js index 459f5b3..c36b954 100644 --- a/bits/75_xlml.js +++ b/bits/75_xlml.js @@ -785,7 +785,7 @@ function parse_xlml_xml(d, _opts)/*:Workbook*/ { case 'datavalidation' /*case 'DataValidation'*/: switch(Rn[3]) { - case 'range' /*case 'Range'*/: dval.ref = Rn; break; + case 'range' /*case 'Range'*/: break; case 'type' /*case 'Type'*/: break; case 'min' /*case 'Min'*/: break; diff --git a/demos/README.md b/demos/README.md index d30c301..9625a7b 100644 --- a/demos/README.md +++ b/demos/README.md @@ -46,6 +46,7 @@ can be installed with Bash on Windows or with `cygwin`. - [`Adobe ExtendScript`](extendscript/) - [`Headless Browsers`](headless/) - [`canvas-datagrid`](datagrid/) +- [`x-spreadsheet`](xspreadsheet/) - [`Swift JSC and other engines`](altjs/) - [`"serverless" functions`](function/) - [`internet explorer`](oldie/) diff --git a/demos/xspreadsheet/README.md b/demos/xspreadsheet/README.md new file mode 100644 index 0000000..c61ed25 --- /dev/null +++ b/demos/xspreadsheet/README.md @@ -0,0 +1,100 @@ +# x-spreadsheet + +The `sheet_to_json` utility function generates output arrays suitable for use +with other JS libraries such as data grids for previewing data. With a familiar +UI, [`x-spreadsheet`](https://myliang.github.io/x-spreadsheet/) is an excellent +choice for developers looking for a modern editor. + +This demo is available at + +## Obtaining the Library + +The [`x-data-spreadsheet` module](http://npm.im/x-data-spreadsheet) includes a +minified script `dist/xspreadsheet.js` that can be directly inserted as a script +tag. The unpkg CDN also exposes the latest version: + +```html + +``` + +## Previewing Data + +The HTML document needs a container element: + +```html +
+``` + +Grid initialization is a one-liner: + +```js +/* note that the browser build exposes the variable `x` */ +var grid = x.spreadsheet(document.getElementById("gridctr")); +``` + +The following function converts data from SheetJS to x-spreadsheet: + +```js +function stox(wb) { + var out = []; + wb.SheetNames.forEach(function(name) { + var o = {name:name, rows:{}}; + var ws = wb.Sheets[name]; + var aoa = XLSX.utils.sheet_to_json(ws, {raw: false, header:1}); + aoa.forEach(function(r, i) { + var cells = {}; + r.forEach(function(c, j) { cells[j] = ({ text: c }); }); + o.rows[i] = { cells: cells }; + }) + out.push(o); + }); + return out; +} + +/* load data */ +grid.loadData(stox(workbook_object)); +``` + +## Editing + +`x-spreadsheet` handles the entire edit cycle. No intervention is necessary. + +## Saving Data + +`grid.getData()` returns an object that can be converted back to a worksheet: + +```js +function xtos(sdata) { + var out = XLSX.utils.book_new(); + sdata.forEach(function(xws) { + var aoa = [[]]; + var rowobj = xws.rows; + for(var ri = 0; ri < rowobj.len; ++ri) { + var row = rowobj[ri]; + if(!row) continue; + aoa[ri] = []; + Object.keys(row.cells).forEach(function(k) { + var idx = +k; + if(isNaN(idx)) return; + aoa[ri][idx] = row.cells[k].text; + }); + } + var ws = XLSX.utils.aoa_to_sheet(aoa); + XLSX.utils.book_append_sheet(out, ws, xws.name); + }); + return out; +} + +/* build workbook from the grid data */ +var new_wb = xtos(xspr.getData()); + +/* generate download */ +XLSX.writeFile(new_wb, "SheetJS.xlsx"); +``` + +## Additional Features + +This demo barely scratches the surface. The underlying grid component includes +many additional features that work with [SheetJS Pro](https://sheetjs.com/pro). + +[![Analytics](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx) diff --git a/demos/xspreadsheet/index.html b/demos/xspreadsheet/index.html new file mode 100644 index 0000000..a756247 --- /dev/null +++ b/demos/xspreadsheet/index.html @@ -0,0 +1,179 @@ + + + + + + +SheetJS + x-spreadsheet Live Demo + + + + + +
+SheetJS Data Preview Live Demo
+
+x-spreadsheet component library
+
+Source Code Repo
+Issues?  Something look weird?  Click here and report an issue
+
+
Drop a spreadsheet file here to see sheet data
+ ... or click here to select a file + +Advanced Demo Options: +Use readAsBinaryString: (when available) +
+

+
+
+ + + + + + + diff --git a/demos/xspreadsheet/shim.js b/demos/xspreadsheet/shim.js new file mode 120000 index 0000000..7ec5819 --- /dev/null +++ b/demos/xspreadsheet/shim.js @@ -0,0 +1 @@ +../../shim.js \ No newline at end of file diff --git a/demos/xspreadsheet/xlsx.full.min.js b/demos/xspreadsheet/xlsx.full.min.js new file mode 120000 index 0000000..dbca48d --- /dev/null +++ b/demos/xspreadsheet/xlsx.full.min.js @@ -0,0 +1 @@ +../../dist/xlsx.full.min.js \ No newline at end of file diff --git a/docbits/11_demos.md b/docbits/11_demos.md index cbb1bde..1bae7ed 100644 --- a/docbits/11_demos.md +++ b/docbits/11_demos.md @@ -31,6 +31,7 @@ The [`demos` directory](demos/) includes sample projects for: - [`Adobe ExtendScript`](demos/extendscript/) - [`Headless Browsers`](demos/headless/) - [`canvas-datagrid`](demos/datagrid/) +- [`x-spreadsheet`](demos/xspreadsheet/) - [`Swift JSC and other engines`](demos/altjs/) - [`"serverless" functions`](demos/function/) - [`internet explorer`](demos/oldie/) diff --git a/misc/docs/README.md b/misc/docs/README.md index cd2392a..5fc2102 100644 --- a/misc/docs/README.md +++ b/misc/docs/README.md @@ -206,6 +206,7 @@ The [`demos` directory](demos/) includes sample projects for: - [`Adobe ExtendScript`](demos/extendscript/) - [`Headless Browsers`](demos/headless/) - [`canvas-datagrid`](demos/datagrid/) +- [`x-spreadsheet`](demos/xspreadsheet/) - [`Swift JSC and other engines`](demos/altjs/) - [`"serverless" functions`](demos/function/) - [`internet explorer`](demos/oldie/) diff --git a/xlsx.flow.js b/xlsx.flow.js index 084f4c6..46077b9 100644 --- a/xlsx.flow.js +++ b/xlsx.flow.js @@ -16337,7 +16337,7 @@ function parse_xlml_xml(d, _opts)/*:Workbook*/ { case 'datavalidation' /*case 'DataValidation'*/: switch(Rn[3]) { - case 'range' /*case 'Range'*/: dval.ref = Rn; break; + case 'range' /*case 'Range'*/: break; case 'type' /*case 'Type'*/: break; case 'min' /*case 'Min'*/: break; diff --git a/xlsx.js b/xlsx.js index 8cfd42e..12c97b7 100644 --- a/xlsx.js +++ b/xlsx.js @@ -16228,7 +16228,7 @@ Workbook.WBProps.date1904 = true; case 'datavalidation' /*case 'DataValidation'*/: switch(Rn[3]) { - case 'range' /*case 'Range'*/: dval.ref = Rn; break; + case 'range' /*case 'Range'*/: break; case 'type' /*case 'Type'*/: break; case 'min' /*case 'Min'*/: break; diff --git a/xlsx.mini.flow.js b/xlsx.mini.flow.js index ab4f488..8cdc018 100644 --- a/xlsx.mini.flow.js +++ b/xlsx.mini.flow.js @@ -2729,15 +2729,21 @@ function evert_arr(obj/*:any*/)/*:EvertArrType*/ { } var basedate = new Date(1899, 11, 30, 0, 0, 0); // 2209161600000 -var dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; function datenum(v/*:Date*/, date1904/*:?boolean*/)/*:number*/ { var epoch = v.getTime(); if(date1904) epoch -= 1462*24*60*60*1000; + var dnthresh = basedate.getTime() + (v.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; return (epoch - dnthresh) / (24 * 60 * 60 * 1000); } +var refdate = new Date(); +var dnthresh = basedate.getTime() + (refdate.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; +var refoffset = refdate.getTimezoneOffset(); function numdate(v/*:number*/)/*:Date*/ { var out = new Date(); out.setTime(v * 24 * 60 * 60 * 1000 + dnthresh); + if (out.getTimezoneOffset() !== refoffset) { + out.setTime(out.getTime() + (out.getTimezoneOffset() - refoffset) * 60000); + } return out; } diff --git a/xlsx.mini.js b/xlsx.mini.js index 5b306a8..3c4aba1 100644 --- a/xlsx.mini.js +++ b/xlsx.mini.js @@ -2651,15 +2651,21 @@ function evert_arr(obj) { } var basedate = new Date(1899, 11, 30, 0, 0, 0); // 2209161600000 -var dnthresh = basedate.getTime() + (new Date().getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; function datenum(v, date1904) { var epoch = v.getTime(); if(date1904) epoch -= 1462*24*60*60*1000; + var dnthresh = basedate.getTime() + (v.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; return (epoch - dnthresh) / (24 * 60 * 60 * 1000); } +var refdate = new Date(); +var dnthresh = basedate.getTime() + (refdate.getTimezoneOffset() - basedate.getTimezoneOffset()) * 60000; +var refoffset = refdate.getTimezoneOffset(); function numdate(v) { var out = new Date(); out.setTime(v * 24 * 60 * 60 * 1000 + dnthresh); + if (out.getTimezoneOffset() !== refoffset) { + out.setTime(out.getTime() + (out.getTimezoneOffset() - refoffset) * 60000); + } return out; }