Skip to main content
Module

x/sheetjs/demos/xspreadsheet/index.html

📗 SheetJS Community Edition -- Spreadsheet Data Toolkit
SheetJS/sheetjs
Extremely Popular
Go to Latest
File
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
<!DOCTYPE html><!-- xlsx.js (C) 2013-present  SheetJS http://sheetjs.com --><!-- vim: set ts=2: --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>SheetJS + x-spreadsheet 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}#b64data{	width:100%;}a { text-decoration: none }</style><!-- x-spreadsheet stylesheet --><link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/></head><body><pre><b><a href="http://sheetjs.com">SheetJS Data Preview Live Demo</a></b>
<a href="https://github.com/myliang/x-spreadsheet">x-spreadsheet component library</a>
<a href="https://github.com/SheetJS/sheetjs">Source Code Repo</a><a href="https://github.com/SheetJS/sheetjs/issues">Issues?  Something look weird?  Click here and report an issue</a>
<div id="drop">Drop a spreadsheet file here to see sheet data</div><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file<textarea id="b64data">... or paste a base64-encoding here</textarea></pre><p><input type="submit" value="Export to XLSX!" id="xport" onclick="export_xlsx();" disabled="true"></p><div id="htmlout"></div><br /><script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script><script src="shim.js"></script><script src="xlsx.full.min.js"></script><script src="xlsxspread.js"></script><script>/*jshint browser:true *//* eslint-env browser *//* eslint no-use-before-define:0 *//*global Uint8Array, Uint16Array, ArrayBuffer *//*global XLSX */
var HTMLOUT = document.getElementById('htmlout');var xspr = x_spreadsheet(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) {		/* convert to x-spreadsheet form */		var data = stox(wb);
		/* update x-spreadsheet */		xspr.loadData(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;			data = new Uint8Array(data);			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);})();
function export_xlsx() {	var new_wb = xtos(xspr.getData());
	/* write file and trigger a download */	XLSX.writeFile(new_wb, 'sheetjs.xlsx', {});}</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>