From 0ff27811444484efb7523fc0711d5fd8f739e27e Mon Sep 17 00:00:00 2001 From: SheetJS Date: Thu, 21 Jul 2022 23:26:52 -0400 Subject: [PATCH] browserify --- .../04-getting-started/03-demos/09-bundler.md | 67 ++++++++ .../docs/04-getting-started/03-demos/index.md | 2 +- docz/src/components/HomepageFeatures/index.js | 2 +- docz/static/browserify/app.js | 148 ++++++++++++++++++ docz/static/browserify/index.html | 62 ++++++++ docz/static/browserify/xlsxworker.js | 12 ++ 6 files changed, 291 insertions(+), 2 deletions(-) create mode 100644 docz/static/browserify/app.js create mode 100644 docz/static/browserify/index.html create mode 100644 docz/static/browserify/xlsxworker.js diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md index 3d7e2c1..36c58c4 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -20,6 +20,72 @@ considered a bundler bug if the tool cannot properly handle JS libraries. ::: +## Browserify + +`browserify` is compatible with the library and should "just work" with the +`require` form in a main page or in a web worker: + +```js +var XLSX = require("xlsx"); +// ... use XLSX ... +``` + +[After installing the module](../../installation/nodejs), bundling is easy: + +```bash +browserify app.js > browserify.js +uglifyjs browserify.js > browserify.min.js +``` + +Web Worker scripts can be bundled using the same approach. + +
Complete Example (click to show) + +1) Install the tarball using a package manager: + + + +
{`\
+$ npm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + +
{`\
+$ yarn add --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+
+ + + +2) Download the following files: + +- [`app.js`](pathname:///browserify/app.js) +- [`index.html`](pathname:///browserify/index.html) +- [`xlsxworker.js`](pathname:///browserify/xlsxworker.js) + +3) Bundle the scripts: + +```bash +npx browserify app.js > browserify.js +npx browserify xlsxworker.js > worker.js +``` + +4) Spin up a local web server: + +``` +npx http-server +``` + +5) Access the site and use the file input element to +select a spreadsheet. + +
+ + ## Bun `bun bun` is capable of optimizing imported libraries in `node_modules`. In @@ -102,6 +168,7 @@ bun bun.js + ## ESBuild The `xlsx.mjs` source file are written in a subset of ES6 that ESBuild diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index d048a10..c4c3909 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -49,7 +49,7 @@ The demo projects include small runnable examples and short explainers. ### Bundlers and Tooling -- [`browserify`](https://github.com/SheetJS/SheetJS/tree/master/demos/browserify/) +- [`browserify`](./bundler#browserify) - [`bun`](./bundler#bun) - [`esbuild`](./bundler#esbuild) - [`parcel`](./bundler#parcel) diff --git a/docz/src/components/HomepageFeatures/index.js b/docz/src/components/HomepageFeatures/index.js index 473ba08..a1b1c36 100644 --- a/docz/src/components/HomepageFeatures/index.js +++ b/docz/src/components/HomepageFeatures/index.js @@ -55,7 +55,7 @@ const FeatureList = [
+ to="/docs/getting-started/demos/"> Demo Projects
diff --git a/docz/static/browserify/app.js b/docz/static/browserify/app.js new file mode 100644 index 0000000..ea0de8e --- /dev/null +++ b/docz/static/browserify/app.js @@ -0,0 +1,148 @@ +/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ +var XLSX = require('xlsx'); +/*jshint browser:true */ +/*global require */ + +var global_wb; + +var process_wb = (function() { + var OUT = document.getElementById('out'); + var HTMLOUT = document.getElementById('htmlout'); + + var get_format = (function() { + var radios = document.getElementsByName( "format" ); + return function() { + for(var i = 0; i < radios.length; ++i) if(radios[i].checked || radios.length === 1) return radios[i].value; + }; + })(); + + var to_json = function to_json(workbook) { + var result = {}; + workbook.SheetNames.forEach(function(sheetName) { + var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]); + if(roa.length) result[sheetName] = roa; + }); + return JSON.stringify(result, 2, 2); + }; + + var to_csv = function to_csv(workbook) { + var result = []; + workbook.SheetNames.forEach(function(sheetName) { + var csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]); + if(csv.length){ + result.push("SHEET: " + sheetName); + result.push(""); + result.push(csv); + } + }); + return result.join("\n"); + }; + + var to_fmla = function to_fmla(workbook) { + var result = []; + workbook.SheetNames.forEach(function(sheetName) { + var formulae = XLSX.utils.get_formulae(workbook.Sheets[sheetName]); + if(formulae.length){ + result.push("SHEET: " + sheetName); + result.push(""); + result.push(formulae.join("\n")); + } + }); + return result.join("\n"); + }; + + var to_html = function to_html(workbook) { + HTMLOUT.innerHTML = ""; + workbook.SheetNames.forEach(function(sheetName) { + var htmlstr = XLSX.write(workbook, {sheet:sheetName, type:'string', bookType:'html'}); + HTMLOUT.innerHTML += htmlstr; + }); + return ""; + }; + + return function process_wb(wb) { + global_wb = wb; + var output = ""; + switch(get_format()) { + case "form": output = to_fmla(wb); break; + case "html": output = to_html(wb); break; + case "json": output = to_json(wb); break; + default: output = to_csv(wb); + } + if(OUT.innerText === undefined) OUT.textContent = output; + else OUT.innerText = output; + if(typeof console !== 'undefined') console.log("output", new Date()); + }; +})(); + +var setfmt = window.setfmt = function setfmt() { if(global_wb) process_wb(global_wb); }; + +var b64it = window.b64it = (function() { + var tarea = document.getElementById('b64data'); + return function b64it() { + if(typeof console !== 'undefined') console.log("onload", new Date()); + var wb = XLSX.read(tarea.value, {type:'base64', WTF:false}); + process_wb(wb); + }; +})(); + +var do_file = (function() { + var use_worker = typeof Worker !== 'undefined'; + var domwork = document.getElementsByName("useworker")[0]; + if(!use_worker) domwork.disabled = !(domwork.checked = false); + + var xw = function xw(data, cb) { + var worker = new Worker('./worker.js'); + worker.onmessage = function(e) { + switch(e.data.t) { + case 'ready': break; + case 'e': console.error(e.data.d); break; + case 'xlsx': cb(JSON.parse(e.data.d)); break; + } + }; + worker.postMessage({d:data,b:'array'}); + }; + + return function do_file(files) { + use_worker = domwork.checked; + var f = files[0]; + var reader = new FileReader(); + reader.onload = function(e) { + if(typeof console !== 'undefined') console.log("onload", new Date(), use_worker); + var data = e.target.result; + data = new Uint8Array(data); + if(use_worker) xw(data, process_wb); + else process_wb(XLSX.read(data, {type: 'array'})); + }; + reader.readAsArrayBuffer(f); + }; +})(); + +(function() { + var drop = document.getElementById('drop'); + if(!drop.addEventListener) return; + + function handleDrop(e) { + e.stopPropagation(); + e.preventDefault(); + do_file(e.dataTransfer.files); + } + + function handleDragover(e) { + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + } + + drop.addEventListener('dragenter', handleDragover, false); + drop.addEventListener('dragover', handleDragover, false); + drop.addEventListener('drop', handleDrop, false); +})(); + +(function() { + var xlf = document.getElementById('xlf'); + if(!xlf.addEventListener) return; + function handleFile(e) { do_file(e.target.files); } + xlf.addEventListener('change', handleFile, false); +})(); + diff --git a/docz/static/browserify/index.html b/docz/static/browserify/index.html new file mode 100644 index 0000000..010e5aa --- /dev/null +++ b/docz/static/browserify/index.html @@ -0,0 +1,62 @@ + + + + + + +SheetJS Live Demo + + + +
+SheetJS Data Preview Live Demo
+(Base64 text works back to IE6; drag and drop works back to IE10)
+
+Source Code Repo
+Issues?  Something look weird?  Click here and report an issue
+Output Format: 

+
Drop a spreadsheet file here to see sheet data

+ ... or click here to select a file
+
+
+

+Advanced Demo Options:
+Use Web Workers: (when available) 
+
+

+

+

+
+
+
+
diff --git a/docz/static/browserify/xlsxworker.js b/docz/static/browserify/xlsxworker.js
new file mode 100644
index 0000000..c5cea24
--- /dev/null
+++ b/docz/static/browserify/xlsxworker.js
@@ -0,0 +1,12 @@
+/* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
+var XLSX = require('xlsx');
+
+postMessage({t:"ready"});
+
+onmessage = function (evt) {
+  var v;
+  try {
+    v = XLSX.read(evt.data.d, {type: evt.data.b});
+postMessage({t:"xlsx", d:JSON.stringify(v)});
+  } catch(e) { postMessage({t:"e",d:e.stack||e}); }
+};