网页中上传Excel文档并实时读取某一列的内容，显示出来的Js实现

时间：2022-02-19 10:41:34

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

日前，笔者也遇到一个类似的问题。就是项目中有一个文本框和导入按钮，要求点击按钮时可以导入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文档并实时读取某一列的内容，显示出来的Js实现

 

网页中上传Excel文档并实时读取某一列的内容，显示出来的Js实现

 

 网页中上传Excel文档并实时读取某一列的内容，显示出来的Js实现

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

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

标签：

相关文章