zoukankan      html  css  js  c++  java
  • 网页中上传Excel文档并实时读取某一列的内容,显示出来的Js实现

    很多项目中可能需要从外部实时读入文件,但不是上传,对于这种该怎么实现呢。

    日前,笔者也遇到一个类似的问题。就是项目中有一个文本框和导入按钮,要求点击按钮时可以导入excel文件,然后能自动读取其中的线路号显示到文本中。毫无意外,便开始在网上搜索JS实现相关功能的帖子,也获得了很多有用的经验。可唯一的问题是,总会出现一些困然的小问题。也是为了给以后的小伙伴省下时间,笔者在这里给大家一个较好的实现。

    不多说,先上代码:

    <html>  
     <head>  
      <title> New Document </title>
        <meta charset="utf-8">  
      <meta name="Generator" content="EditPlus">  
      <meta name="Author" content="">  
      <meta name="Keywords" content="">  
      <meta name="Description" content="">  
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
      <script type="text/javascript">  
        var oWB = null;
        var oXL = null;
        function loadExcel() {
               $("#upfile").click();
               //得到文件路径的值  
               var filePath = $("#upfile").val();  
               //创建操作EXCEL应用程序的实例  
               try{
                this.oXL = new ActiveXObject("Excel.Application");
                try{
                    //打开指定路径的excel文件  
                    this.oWB = this.oXL.Workbooks.open(filePath);  
                    //获取sheet数
                     var sheet = this.oWB.Worksheets.count;
                    //返回所传excel表格的sheet数供选择               
                    $("#sheet").css("display","block");
                    for(var i = 1;i <= sheet;i++){
                        var option = '<option value="'+i+'">-第'+i+'页-</option>';
                        $("#sheet").append(option);    
                    }
                }catch(e){
                    alert("请设置浏览器启用将文件上传到浏览器时包含本地路径!");
                }
                }catch(e){
                    alert("请设置浏览器允许初始化和执行未标记为可安全执行脚本的ActiveX控件!");
                }           
            }
        function readexcel(){
            var selsheet = $("#sheet").val();        
            var tempStr = [];  
                   //操纵所选sheet页(从一开始,而非零)  
               oWB.worksheets(parseInt(selsheet)).select();  
               var oSheet = oWB.ActiveSheet;            
               //使用的行数和列数  
             var rows =  oSheet.usedrange.rows.count;
             var columns = oSheet.usedrange.Columns.count;
             //查找线路号所在列
             var j = 1;
             for(j;j <= columns; j++){
                if(oSheet.Cells(1, j).value == "线路"){
                    break;
                }
             }
               try { 
                //首行首列为表头,默认不取值。
                  for (var i = 2; i <= rows; i++) { 
                      if(oSheet.Cells(i, j).value){
                          tempStr.push(oSheet.Cells(i, j).value)
                            //tempStr += oSheet.Cells(i, 3).value + "," ;
                        }
                  }
                    
               } catch(e) {  
                  $("#txtArea").val(tempStr);  
               }             
               $("#txtArea").val(tempStr);  
               //退出操作excel的实例对象  
               //oXL.Application.Quit();  
                //手动调用垃圾收集器  
               //CollectGarbage();  
        }    
      </script>  
     </head>  
      
     <body>
      <input type="text" id="txtArea" style="float:left;"/>  
      <input type="file" id="upfile" style="float:left; display:none;" />
      <select id="sheet" style="display:none; height:21px; float:left;" onchange="readexcel()">
        <option value="" selected>-请选择-</option>
      </select>  
      <input type="button" style="float:left; height:21px;" onclick="loadExcel();" value="read">  
    <br>  
     </body>  
    </html>  


     

    运行结果图:

     

    因为excel中可能有多个sheet页,因而笔者设计了一个自动加载页数并根据页数读入数据的功能,大家可以适当跟着改一下。

    另外,请读者朋友们注意,此方法需要设置浏览器启用将文件上传到浏览器时包含本地路径,以及允许或提示初始化和执行未标记为可安全执行脚本的ActiveX控件。

  • 相关阅读:
    笔记:Why don't you pull up a chair and give this lifestyle a try?
    使用 Git 来备份 MySQL 数据库
    FastAdmin 将 PHP 框架升级到 ThinkPHP 5.1
    javascript的冻结对象之freeze(),isFrozen()方法
    javascript的密封对象之seal(),isSealed()方法
    javascript的防篡改对象之preventExtensions()方法
    自己根据js的兼容封装了一个小小的js库
    关于跨浏览器的部分代码的封装
    jQuery 的noConflict()的使用.
    jQuery的get()用法
  • 原文地址:https://www.cnblogs.com/Only-lovw-you/p/7412956.html
Copyright © 2011-2022 走看看