如何将excel(xls)文件转换为html并添加排序和过滤

时间:2014-01-08 14:30:13

标签: html sorting filtering xls

以下代码适用于excel到html转换和部分排序。

我希望当单击标题(或第一行)中的任何单元格时,整个表应该被排序 基于该列(升序或降序)。

注意:以下代码使用任何Excel输入文件和IE9中Internet选项中的activex支持设置进行测试。

<HTML>
    <HEAD>
        <TITLE>Test</TITLE>    <script type="text/javascript" src="../jquery-latest.js"></script>
    <script type="text/javascript">

    </script>

    <STYLE TYPE="text/css">body div * { font-family: Verdana; font-weight: normal; font-size: 10px; } body { background-color: #FFEEFF; } .tableContainer table { border: 0px solid #000000; } .tblHeader { font-weight: bold; text-align: center; background-color: #FFAAEE; color: black; } .oddRow, .evenRow { vertical-align: top; } .tblHeader td, .oddRow td, .evenRow td { border-left: 2px solid #FFFFFF; border-bottom: 0px solid #000000; border-top: 0px solid #000000;} .lastCol { border-right: 0px solid #000000; } .oddRow { background-color: #abcdef; } .evenRow { background-color: #f0f0f0; }</STYLE>
    <script LANGUAGE="JavaScript">

        function _ge(id) {

                return document.getElementById(id);
        }

        function sortTable(){
            var tbl = document.getElementById("tblExcel2Html").tBodies[0];
            var store = [];
            //alert(tbl.rows.length);
            for(var i=0, len=tbl.rows.length; i<len; i++){
                var row = tbl.rows[i];
                //alert(row.cells[1].innerText);
                var sortnr = parseFloat(row.cells[1].textContent || row.cells[1].innerText);
                if(!isNaN(sortnr)){
                    alert(store.push([sortnr, row]));
                    //store.push([sortnr, row]);
                }
            }
            store.sort(function(x,y){
                //alert(x[0] - y[0]);
                return x[0] - y[0];
            });
            //alert(store.length);
            for(var i=0, len=store.length; i<len; i++){
                alert(tbl.appendChild(store[i][1]));
              //alert(tbl.appendChild(store[i][1]));
            }

            //alert(store);
            store = null;
        }

        function convert2HTML() {

            var ex;
            try {
                ex = new ActiveXObject("Excel.Application");
            }
            catch (e)
            {
                alert('Your browser does not support the Activex object.\nPlease switch to Internet Explorer.');
                return false;
            }

            //alert(arraytext);

            //var ef = ex.Workbooks.Open("D:\\JS_HTML5\\Vin\\Test.xlsx");

            var ef = ex.Workbooks.Open("D:\\JS_HTML5\\docs\\filter4\\tests\\Test.xlsx");

            var es = ef.Worksheets(1);

            var colsCount = ef.Worksheets(1).UsedRange.Columns.Count;
            //alert(colsCount);
            var rowsCount = ef.Worksheets(1).UsedRange.Rows.Count;
            //alert(rowsCount);

            var rStart = parseInt(1,10);
            var cStart = parseInt(1,10);

            var cEnd = parseInt(colsCount,10);
            var rEnd = parseInt(rowsCount,10);

              var oc = _ge('tableContainer');

            oc.innerHTML = '';
            var tbl = document.createElement('TABLE');
            tbl.id = 'tblExcel2Html';

            tbl.border = '10';
            tbl.cellPadding = '4';
            tbl.cellSpacing = '0';

            oc.appendChild(tbl);
            var i,j,row,col,r,c;

            for(i = rStart, r = 0; i <= rEnd; i++,r++) {

                row = tbl.insertRow(r);
                row.className = (i == rStart) ? 'tblHeader' : (i % 2 == 0) ? 'evenRow' : 'oddRow';

                for(j = cStart, c = 0; j <= cEnd; j++,c++) {

                    col = row.insertCell(c);
                    col.className = (j == cEnd) ? 'lastCol' : '';
                    col.innerHTML = es.Cells(i,j).value || ' ';

                }
            }
            ex.ActiveWorkbook.Close(true);
            ex.Application.Quit();
            ex = null;

            sortTable();
        }

    </script>
</HEAD>
<BODY onload = "convert2HTML()">
<h2>Test</h2>
<hr><br>

<!--     <td colspan="6" align="CENTER"><INPUT TYPE="button" VALUE="Convert to HTML" ONCLICK="convert2HTML()"></td> -->

<div id="tableContainer"></div>
<div id="tblExcel2Html"></div>
<footer>
    <br>
             <center>    &copy;Initial Draft V0.1     </center>
</footer>
<a href="Home.html" >Home</a>
</BODY>

基本上我想通过排序和过滤支持将excel转换为html。

先谢谢 Vinoth.S

1 个答案:

答案 0 :(得分:0)

通过调用

创建对象
ex = new ActiveXObject("Excel.Application");

仅适用于安装了Excel的Windows系统。我建议你使用jqgrid作为javascript数据查看器和像phpexcel这样的php库来解析excel并返回原始数据。