JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="file-select">
  Select excel file to compare:
  <br>
  <input type="file" name="" id="" onchange="handleFile(event)">
</div>
<div class="_r action-box">
  <div class="_c-4">
    Sheet:
    <div class="select">
      <select id="sheets">
        <option value="">select</option>
      </select>
    </div>
  </div>
  <div class="_c-4">
    Left:
    <div class="select">
      <select id="left_column">
        <option value="">select</option>
      </select>
    </div>
  </div>
  <div class="_c-4">
    Right:
    <div class="select">
      <select id="right_column">
        <option value="">select</option>
      </select>
    </div>
  </div>
  <button id="compare">Generate Diff</button>
</div>
<div id="output">

</div>
<script src="http://oss.sheetjs.com/js-xlsx/shim.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/jszip.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/ods.js"></script>

<script src="//prettydiff.com/lib/global.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/language.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/options.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/finalFile.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/safeSort.js" type="application/javascript"></script>
<script src="//prettydiff.com/ace/ace.js" type="application/javascript"></script>
<script src="//prettydiff.com/api/dom.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/csspretty.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/csvpretty.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/diffview.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/jspretty.js" type="application/javascript"></script>
<script src="//prettydiff.com/lib/markuppretty.js"...

CSS

body {
  font-family: arial;
  font-size: 12px;
  padding: 0;
  margin: 0;
}

.diff .texttitle,
.diff .count,
.diff .author {
  display: none;
}

.diff {
  margin-bottom: 5px;
}

.diff ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: _counter;
}

.diff li {
  counter-increment: _counter;
  white-space:pre;
}

.diff li:before {
  content: counter(_counter);
  display: inline-block;
  min-width: 15px;
  padding: 5px;
  background: #999;
  color: white;
  text-align: left;
  margin-right: 5px;
  font-size: 8px;
  border: 1px solid #666;
  border-bottom: 0px;
}

.diff-left,
.diff-right {
  float: left;
  display: block;
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #333;
  border-top-color: #2d2d2d;
  border-bottom-color: #2d2d2d;
  max-height: 200px;
}

.diff-left {
  border-left: 0;
}

.diff-right {
  border-right: 0;
}

em {
  background: lightyellow;
  border: 1px solid orange;
}

.sheet {
  font-family: arial;
  font-size: 11px;
  box-sizing: border-box;
  padding: 5px;
  background: white;
}

.sheet-head {
  font-size: 12px;
  font-weight: bold;
  background: lightblue;
  padding: 5px 10px;
  border-bottom: 1px solid #127292;
  cursor: pointer;
}

.sheet-head:before {
  content: '-';
  display: inline-block;
  margin-right: 5px;
  color: #127292;
}

._collapsed.sheet-head:before {
  content: '+';
}

.diff:after,
._r:after {
  clear: both;
  display: block;
  content: '';
}

.col-head {
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  background: #ddd;
  box-shadow: #ddd 0 1px 3px;
  border-bottom: 1px solid #999;
}

._r>p>em {
  font-weight: bold;
  background: none;
  border: none;
  color: red;
}

._r ._c-6,
._r ._c-4 {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 5px;
}

._r ._c-4 {
  width: 33.33%;
}

.select select {
  width: 100%;
  padding: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
}

.select {
  position:...

JavaScript

function ExcelDiffParser(arraybuffer) {
  var self = this;
  var COLUMNS = 0;

	var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for(var i = 0; i != data.length; ++i){
	  arr[i] = String.fromCharCode(data[i]);
  }
	
  var binary = arr.join("");
  
  this._wb = XLSX.read(binary, {
    type: 'binary'
  });

  this._sheets = this.workBookParser(this._wb);

  this.getSheets = function() {
    return self._sheets;
  };

  this.getSheet = function(sheetName) {
    return self._sheets[sheetName];
  };

  this.getSheetColumns = function(sheetName) {
    return self._sheets[sheetName][COLUMNS];
  };

  this.getSheetRows = function(sheetName) {
    return self._sheets[sheetName] instanceof Array ?
      self._sheets[sheetName].slice(1) : [];
  };
}

ExcelDiffParser.prototype.workBookParser = function(wb) {
  var sheets = {};
  var sheetIndex = 0;
  sheets.$$sheetNames = [];
  for (var s in wb.Sheets) {
    var _sheet = wb.Sheets[s];
    if (_sheet['!ref']) {
      var _range = _sheet['!ref'].split(/\:/g);
      var colFrom = _range[0].replace(/[0-9]/g, '').charCodeAt(0),
        colTo = _range[1].replace(/[0-9]/g, '').charCodeAt(0),
        rowFrom = +(_range[0].replace(/[^\d]/g, '')),
        rowTo = +(_range[1].replace(/[^\d]/g, ''));

      sheets[s] = [];
      var _columns = [];
      for (var j = rowFrom; j <= rowTo; j++) {
        var _rows = [];
        var _row = {};
        for (var i = colFrom; i <= colTo; i++) {
          var _colKey = String.fromCharCode(i);
          var _col = _sheet[_colKey + j] ? _sheet[_colKey + j].v : '';
          if (j === 1) {
            _columns.push(_col);
          } else {
          	_row[_columns[i - colFrom]] = _col.toString();
          }
        }
        _rows.push(_row);
        sheets[s].push(_row);
      }
      sheets[s].sheetName = s;
      sheets[s].columns = _columns;
      sheets.$$sheetNames.push(s);
      sheets[sheetIndex] = sheets[s];
      sheetIndex++;
    }
  }

  sheets.length =...