網頁中上傳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控件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM