<!DOCTYPE html> <!-- sheetjs (C) SheetJS https://sheetjs.com --> <!-- vim: set ts=2: --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noindex"/> <title>SheetJS + Tabulator Live Demo</title> <style> #drop{ border:2px dashed #bbb; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:25px; text-align:center; font:20pt bold,"Vollkorn";color:#bbb } a { text-decoration: none } </style> <!-- tabulator stylesheet --> <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet"> </head> <body> <pre> <b><a href="https://sheetjs.com">SheetJS + Tabulator Demo</a></b> <button id="imp"><b>Click here to import</b></button> </pre> <p><input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();"></p> <div id="htmlout"></div> <br /> <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js"></script> <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script> <!-- Tabulator must be loaded after SheetJS scripts --> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script> <script> /*jshint browser:true */ /* eslint-env browser */ /* eslint no-use-before-define:0 */ /*global XLSX */ var tbl = new Tabulator('#htmlout', { autoColumns: true }); var HTMLOUT = document.getElementById('htmlout') HTMLOUT.style.height = (window.innerHeight - 400) + "px"; HTMLOUT.style.width = (window.innerWidth - 50) + "px"; var process_wb = (function() { var XPORT = document.getElementById('xport'); return function process_wb(wb) { var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); tbl.setData(data); XPORT.disabled = false; if(typeof console !== 'undefined') console.log("output", new Date()); }; })(); var do_file = (function() { return function do_file(files) { var f = files[0]; var reader = new FileReader(); reader.onload = function(e) { if(typeof console !== 'undefined') console.log("onload", new Date()); var data = e.target.result; process_wb(XLSX.read(data)); }; reader.readAsArrayBuffer(f); }; })(); (function() { try { fetch("https://docs.sheetjs.com/pres.numbers") .then(function(res) { return res.arrayBuffer(); }) .then(function(ab) { process_wb(XLSX.read(ab)); }); } catch(e) {} })(); document.getElementById("imp").addEventListener("click", function() { /* use Tabulator SheetJS integration */ tbl.import("xlsx", ".xlsx", "buffer"); }); function export_xlsx() { /* use Tabulator SheetJS integration */ tbl.download("xlsx", "SheetJSTabulator.xlsx", { documentProcessing: function(wb) { var ws = XLSX.utils.aoa_to_sheet([ ["SheetJS + Tabulator Demo"], ["Export Date:", new Date()] ]); XLSX.utils.book_append_sheet(wb, ws, "Metadata"); return wb; } }); } </script> <script type="text/javascript"> /* eslint no-use-before-define:0 */ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36810333-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>