前端js讀取本地excel表

<!DOCTYPE html>
<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta charset="utf-8" /> 
  <title>excel demo</title> 
  <script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
  <style>

  </style> 
  <script type="text/javascript">
      // 讀取本地excel文件
    function readWorkbookFromLocalFile(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {type: 'binary'});
            // 處理excel文件
            handle(workbook);
        };
        reader.readAsBinaryString(file);
    }

    // 處理excel文件
    function handle(workbook) {
        // workbook.SheetNames[0] excel第一個sheet
         var datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
        
         if(datas.length > 0){

            // 獲取列名是彙總列名,避免某行某個字段沒有值,會缺少字段
            // 標題
            var title = [];
            // 獲取每行數據
            first:
            for(var index in datas){ // datas數組,index爲索引
                second:
                for(var key in datas[index]){ // datas[index]對象,key爲鍵
                    if (-1 === title.indexOf(key)) {
                        title.push(key);
                    }
                }
            }
            // 列名
            console.log(title);
            // 數據
            console.log(datas);
        }  
    }

  </script>
 </head> 
 <body>
   ​ ​  <form>
       <input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
   </form>
 </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章