使用 Javascript 和 xlsx.js 将多张数据转换为 json 数据并在 <pre> 标签内显示

如何解决使用 Javascript 和 xlsx.js 将多张数据转换为 json 数据并在 <pre> 标签内显示

Index.php- 上传excel文件并在pre标签内显示json数据。

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Budget</title>
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>    
<body>
<div class="col-sm-6 custom-file"> <!-- 2nd column -->
          <div class="row">
            <div class="col-sm-6">
              <input class="form" type="file" id="fileUpload"> // upload .xlsx,.xls file 
            </div>
            <div class="col-sm-6">
              <button type="button" class="btn btn-outline-primary" id="uploadExcel">Convert</button>
            </div>
          </div>
        <PRE id="jsonData"></PRE> <!-- display Json data of multiple sheets from workbook(budget_book.xls) -->
        </div>
<script src="js/file.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
</body>
</html>

file.js 用于上传excel文件并获取多个excel表数据并转换为Json

let rABS=true;
let input=document.getElementById('fileUpload');
let uploadExcel=document.getElementById('uploadExcel');
let jsonObject=[];

input.addEventListener('change',function(Event){
    selectedFile=Event.target.files[0]; 
}); 

uploadExcel.addEventListener('click',()=>{
    if(selectedFile){
        console.log(selectedFile);
         var reader = new FileReader();
        
        if(rABS){reader.readAsBinaryString(selectedFile);}
        else{reader.readAsArrayBuffer(selectedFile);}
         
       /*  reader.addEventListener('load',function() {
          document.getElementById('jsonData').innerText = this.result;
        }); */
        reader.onload=(event)=>{
        
            let data=event.target.result;
            let workbook=XLSX.read(data,{type:rABS ?'binary':'array'});
            let sheet_name_list=workbook.SheetNames;
            console.log(sheet_name_list);
            
           
          sheet_name_list.forEach(sheet => {
                let worksheet=workbook.Sheets[sheet];
                console.log(sheet);
                let rowObject=XLSX.utils.sheet_to_row_object_array(worksheet);
                jsonObject=JSON.stringify(rowObject,undefined,2);
                document.getElementById('jsonData').innerHTML=jsonObject; // display multiple excel sheets data inside <pre> tag in index.php
            });
            
         };
        
    }
});

在我的budget_book.xlsx 中有两张表（sheet1 和sheet2），但代码只显示最后一张表（即sheet2）

foreach 循环工作正常，因为它在控制台中显示了 2 个工作表，并且工作表 1 中的数据也显示在控制台日志中，但在内部显示了工作表 2（最后一个工作表）中的数据。

但在标签内部它不显示来自 Budget_Book.xls 的 sheet1 的数据

请为我提供此问题的解决方案，以显示两张工作表中的 Json 数据。是否有其他方法可以实现这一点，因为这也将受到欢迎。请仅提供纯 javascript 解决方案。

使用 Javascript 和 xlsx.js 将多张数据转换为 json 数据并在 <pre> 标签内显示

如何解决使用 Javascript 和 xlsx.js 将多张数据转换为 json 数据并在 <pre> 标签内显示

相关推荐