JSFiddle - React, Tailwind, and code Playground

by ant_logist

HTML

<script src="http://www.ant-logistics.com.ua/plugin/zip/zip.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/dataview.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/deflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/inflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/zip-fs.js"></script>
<div class="main">
    <a href="http://www.ant-logistics.com.ua/ui/import.xlsx">Пример файла Excel</a>
    <progress id="progress"></progress>
    <div class="filedrag" id="comps">Перетащите файл <span class="red">сюда</span></div>
    <div class="result"></div>
</div>

<script src="http://www.ant-logistics.com.ua/plugin/zip/zip.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/dataview.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/deflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/inflate.js"></script>
<script src="http://www.ant-logistics.com.ua/plugin/zip/zip-fs.js"></script>

CSS

progress {
    float: right;
    width:300px;
    display: none;
}

.result {
    border-top: 2px solid gray;
    padding-top: 2px;
}

.filedrag
{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    padding: 122px 0;
    margin: 10px 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}
.filedrag.hover
{
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}
.red {
    color:red;
}
}

JavaScript

zip.workerScriptsPath = "http://www.ant-logistics.com.ua/plugin/zip/";
var c = document.getElementById("comps"),
    FileDragHover = function (e) {
     e.stopPropagation();
     e.preventDefault();
     if(e.target.id==='comps')
       e.target.className = (e.type == "dragover" ? "filedrag hover" : "filedrag");
     else
       c.className = (e.type == "dragover" ? "filedrag hover" : "filedrag");
    },
    printExcelData = function(sheets, strings) {
        console.info(sheets,strings);
        var unzipProgress = document.getElementById("progress");
        unzipProgress.style.display='block';
        console.info(unzipProgress);
        console.info(strings.getData);
        strings.getData(new zip.TextWriter(), function(text) {
            console.info(text);    
        }, function(current, total) {
            unzipProgress.value = current;
            unzipProgress.max = total;
        });
        
        return;
        
        
       /* strings.getData(new zip.TextWriter(), function(text) {
            alert(1)
            var st=$($.parseXML(decodeURIComponent(escape(text)))).find('si t');
            for(i=0;i<st.length;++i)
                st[i]=$(st[i]).text();
            var parseSheet=function(sheet){
                var j,i,h,sh,d=[];
                sheet.getData(new zip.TextWriter(), function(text) {
                    sh=$($.parseXML(decodeURIComponent(escape(text)))).find('sheetdata row');
                    console.info(sh)
                    sh.each(function(e){
                        var c=$(this).find('c'),ci,v,o={};
                        for(i=0;i<c.length;++i){
                            ci=$(c[i]);
                            v=ci.find('v').text();
                            if(ci.attr('t'))
                                v=st[v];
                            j=ci.attr('r').charCodeAt(0)-65;
                            if(h)
                                o[h[j]]=v;//o[h[i]]='';
                            else
          ...