How to use xlsx and bootstrap-table to import xlsx file

2017/11/05 JS

How to use xlsx and bootstrap-table to import xlsx file & export to a xlsx file

about

sheetjs

  • official website : http://sheetjs.com/

  • github page : https://github.com/sheetjs/js-xlsx

bootstrap-table

  • official websit : http://bootstrap-table.wenzhixin.net.cn/
  • github page : https://github.com/wenzhixin/bootstrap-table

how to use xlsx.js to import one xlsx file?

using file input

  • download the js file : xlsx.full.min.js & css files

  • the html code
    <center>
    <input type="file" id="inputsheet" onchange="Sheet(this.files)">
    </center>
  • the js code

  • xlsxworker.js

    /* xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
    importScripts('shim.js');
    importScripts('xlsx.full.min.js');
    postMessage({t:"ready"});

    onmessage = function (evt) {
    var v;
    try {
        v = XLSX.read(evt.data.d, {type: evt.data.b});
    postMessage({t:"xlsx", d:JSON.stringify(v)});
    } catch(e) { postMessage({t:"e",d:e.stack||e}); }
    };

  • using the dofile(e) to
   function Sheet(e) {
    var golobal_table = [];
    var X = XLSX;
    var XW = {
        /* worker message */
        msg: 'xlsx',
        /* worker scripts */
        worker: './assets/js/xlsxworker.js'
    };
    var useworker = typeof Worker !== 'undefined';
    var rABS = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryString;
    var use_worker = typeof Worker !== 'undefined';
    var xw = function xw(data, cb) {
        var worker = new Worker(XW.worker);
        worker.onmessage = function(e) {
            switch(e.data.t) {
                case 'ready': break;
                case 'e': console.error(e.data.d); break;
                case XW.msg: cb(JSON.parse(e.data.d)); break;
            }
        };
        worker.postMessage({d:data,b:rABS?'binary':'array'});
    };
    
    function do_file(files) {
        rABS = true;
        use_worker = true;
        var f = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            if(typeof console !== 'undefined') console.log("onload", new Date(), rABS, use_worker);
            var data = e.target.result;
            if(!rABS) data = new Uint8Array(data);
            if(use_worker) xw(data, process_wb);
            else process_wb(X.read(data, {type: rABS ? 'binary' : 'array'}));
        };
        if(rABS) reader.readAsBinaryString(f);
        else reader.readAsArrayBuffer(f);
    };
    

    var global_wb;

    var process_wb = (function() {
        var get_format = (function() {
            var radios = document.getElementsByName( "format" );
            return function() {
                for(var i = 0; i < radios.length; ++i) if(radios[i].checked || radios.length === 1) return radios[i].value;
            };
        })();
        var to_json = function to_json(workbook) {
            if(useworker && workbook.SSF) XLSX.SSF.load_table(workbook.SSF);
            var result = {};
            workbook.SheetNames.forEach(function(sheetName) {
                var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header:1});
                if(roa.length > 0) result[sheetName] = roa;
            });
            return result["Sheet1"];
        };

        var to_csv = function to_csv(workbook) {
            var result = [];
            workbook.SheetNames.forEach(function(sheetName) {
                var csv = X.utils.sheet_to_csv(workbook.Sheets[sheetName]);
                if(csv.length){
                    result.push("SHEET: " + sheetName);
                    result.push("");
                    result.push(csv);
                }
            });
            return result.join("\n");
        };

        var to_fmla = function to_fmla(workbook) {
            var result = [];
            workbook.SheetNames.forEach(function(sheetName) {
                var formulae = X.utils.get_formulae(workbook.Sheets[sheetName]);
                if(formulae.length){
                    result.push("SHEET: " + sheetName);
                    result.push("");
                    result.push(formulae.join("\n"));
                }
            });
            return result.join("\n");
        };

        var to_html = function to_html(workbook) {
            HTMLOUT.innerHTML = "";
            workbook.SheetNames.forEach(function(sheetName) {
                var htmlstr = X.write(workbook, {sheet:sheetName, type:'binary', bookType:'html'});
                HTMLOUT.innerHTML += htmlstr;
            });
            return "";
        };

        return function process_wb(wb) {
            global_wb = wb;
            var output = "";
            switch(get_format()) {
                case "form": output = to_fmla(wb); break;
                case "html": output = to_html(wb); break;
                case "json": output = to_json(wb); break;
                default: output = to_json(wb);
            }
            if(typeof console !== 'undefined') console.log("output", output);
            deal(output);
        };
    })();
    

    do_file(e);
};

function deal(json){
    //here to deal the json information
}

  • now we get the json data in deal.

using bootstrap to show json info

  • download the bootstrap-table.js & css files

    <table id="table"  style="font-size:11px;"  data-height="500" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" 
            data-pagination="true" data-search="false" data-page-size="7">
            <thead>
                <tr >
                    <th class="span3" data-field="index" data-sortable="true">ID</th>
                    <th class="span3" data-field="name" data-sortable="true">NAME</th>
                    <th class="span3" data-field="value" data-sortable="true">VALUE</th>
                </tr>
            </thead>
    </table>  


    function deal(json){
        //here to deal the json data to ID-NAME-VALUE format
        //[{"index":1,"name":"hello","value":499}] 
        //then destroy the table and recreate the table with json data
        $("#table").bootstrapTable('destroy');
        $("#table").bootstrapTable({
            data    : json,
            toolbar : "#toolbar",
            pagination : true,
            pageNumber : 1,
            pageSize : 20,
            pageList : [5,10,20],
            search : true,
            searchAlign : "right",
            exportDataType : "selected",
            cardView : false,
            detailView : false
            });

    
        };
    }

using table export to import as xlsx

  • the xlsx demo web url : http://sheetjs.com/demos/table.html

  • download and import the tableExport.jquery.plugin file from http://kayalshri.github.io/tableExport.jquery.plugin/


    //easy to use to export xlsx file.
    function export(){
        $('#table').tableExport({type:'xlsx'},"Bom");
    }

Show Disqus Comments

Search

    Post Directory