JSFiddle - React, Tailwind, and code Playground

by xls2web

HTML

<script src="https://cdn.rawgit.com/xls2web/x2w/Relink/x2w.js"></script>
<div id="xliFrameContainer" data-token = "SDEB69797A53B9EE1D!252/-4162847905282696472/t=0&s=0&v=!ANDh8Xi_vXzcWGw" data-callback = "xliFrameCallback"></div>

<div id="xlsCallParameters">
	<p>Write the following formula</p>
	<input id="input00">
	<p>to the following cell (put the full cell address using A1 reference style and including worksheet name, e.g. 'Sheet1!B1')</p>
	<input id="input01">
	<p>then create JSON based on the following range (e.g. 'Sheet1!A1:B4')</p>
	<input id="input10">
	<button id="goXls2JSON" onclick="xlsQuery()">Go!</button>
</div>
<div id="logDiv"></div>

CSS

#xliFrameContainer {
    float:left; 
    overflow: hidden; 
    min-width: 400px;
    height: 200px;
}
#xlsCallParameters {
   float:left; 
   overflow: hidden; 
   margin-left: 25px;
   width: 30%;  
}

#logDiv {
    clear: both;
	    background: #eee;
	    display: block;
	    margin: 0.5em;
	    min-height: 12em;
	    max-height: 12em;
	    overflow: scroll;
	    position: relative;
	    width: 97%;
	
	    -webkit-border-radius: 15px;
	    -moz-border-radius: 15px;
	    border-radius: 5px;
	    
	    font-family: 'Open Sans', sans-serif;
	    font-size: 0.9em;
}

JavaScript

$(function ()
{
    $("#xliFrameContainer").xls2web();      
});

function xlsQuery() {   	
   	$("#xliFrameContainer").xls2JSON({
	    		writeValue: id("input00").value,
	    		writeTo: id("input01").value,	    		
	    		readFrom: id("input10").value
	    	 });  
}

function xliFrameCallback(response){  
   log("Response JSON = " + JSON.stringify(response), "logDiv");     
}