<!DOCTYPE html> <html> <head> <meta name="robots" content="noindex"> <title>SheetJS + Dojo Memory Store Demo</title> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dijit/themes/claro/claro.css"> </head> <body class="claro"> <h1>SheetJS + Dojo Memory Store Demo</h1> <br/> This demo fetches <a href="https://docs.sheetjs.com/pres.xlsx">https://docs.sheetjs.com/pres.xlsx</a>, parses the file, generates a Memory store from the first worksheet, and loads a Combo box. When a President is selected, the text box will display the "Index" field from the dataset. <br/> (this HTML page is not minified -- feel free to view source!)<br/><br/> <a href="https://docs.sheetjs.com">SheetJS CE Documentation</a><br/><br/> <script> dojoConfig = { parseOnLoad: true, packages: [ { name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" } ] }; </script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js" data-dojo-config=""></script> <script> require([ "dojo/ready", "dojo/request/xhr", "dojo/store/Memory", "dijit/registry", "xlsx" ], function(ready, xhr, Memory, registry, _XLSX) { ready(function() { /* fetch test file */ xhr("https://docs.sheetjs.com/pres.xlsx", { headers: { "X-Requested-With": null }, handleAs: "arraybuffer" }).then(function(ab) { /* read ArrayBuffer */ var wb = XLSX.read(ab); /* generate row objects from first worksheet */ var ws = wb.Sheets[wb.SheetNames[0]]; var aoo = XLSX.utils.sheet_to_json(ws); /* generate memory store and assign to combo box*/ var store = new Memory({ data: aoo }); registry.byId("combo").store = store; /* when a President is selected, display the index */ registry.byId("combo").watch("item", function(w, oitem, nitem) { registry.byId("pindex").set("value", nitem.Index); }); }); }); }); </script> <b>Select a president</b><br/> <div id="combo" data-dojo-type="dijit/form/ComboBox" data-dojo-props="searchAttr:'Name'"></div><br/> <b>Index of Selected President</b><br/> <div id="pindex" data-dojo-type="dijit/form/TextBox"></div> </body> </html>