[ Foro de Javascript ]

Importar Excel a formato JSON y cargar una tabla

24-Jul-2023 11:12
Invitado (Juan)
1 Respuestas

Hola, necesito importar un archivo Excel y transformarlo a formato JSON para que se pueda cargar registros en una Tabla todo ese proceso con Java Script. Cuando ejecuto el programa me marca este error:  ReferenceError: document is not defined at Object.<anonymous>

Los códigos que estoy revisando son lo siguiente:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   
</head>
<body style="background-color: rgb(250, 250, 250);">
   <div class="container py-4">
     <div class="row mb-4">
       <div class="col-12 col-md-4">
           <input type="file" class="form-control" id="excel-input">

       </div>
     </div>
   </div class= "row">
     </div class="col-12">
       <div class="table-responsive">
         <table class="table table-bordered" id="excel-table">
         <!-- <tbody>-->
           <thead>
               <tr>
                   <!--nombre, pais, salario, rol-->
               </tr>
           </thead>
          </tbody>
         </table>
       </div>
     </div>
    </div>
   </div>
   <!--  Biblioteca para excel read-excelfile -->
<script src="https://unpkg.com/read-excel-file@5.x/bundle/read-excel-file.min.js"></script>
       
<!--  Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./index.js"></script>
 
</body>
</html>


index.js    (Java Script)

class Excel{
   constructor(content){
       this.content = content
   }

   header(){
       return this.content[0]
   }

   rows(){
       return new RowCollection(this.content.slice(1, this.content.length))
   }
}

class RowCollection{
   constructor(rows){
       this.rows=rows
   }

   first(){
       return new Row(this.rows[0])
   }

   get(index){
       return new Row(this.rows[index])
   }

   count(){
       return this.rows.length
   }

   whereCountry (countryName){
       
   }
}  

class Row{
   constructor(row){
       this.row=row
   }

   name(){
       return this.row[0]
   }

   country(){
       return this.row[1]
   }

   salary(){
       return this.row[3]
   }

   role(){
       return this.row[2]
   }
}

class ExcelPrinter{
   static print(tableId,excel){
       const table = document.getElementById(tableId)
       excel.header().forEach(title => {
           table.querySelector("thead>tr").innerHTML+=`<td>${title}</td>`
       })

       for (let index=0;index < excel.rows().count();index++){
           const row = excel.rows().get(index);
           table.querySelector('tbody').innerHTML+= `
                <tr>
                <td>${row.name()}</td>
                <td>${row.country()}</td>
                <td>${row.role()}</td>
                <td>${row.salary()}</td>
             </tr>  
           `
       }

   }

}

const excelInput = document.getElementById('excel-input')
excelInput.addEventListener('change', async function(){
    const content = await readXlsxFile(excelInput.files[0])
    const excel = new Excel(content)

    //console.log(excel.rows().first())
})


17-Sep-2023 09:38
Invitado (Juan)

Como se importa de Excel solo algunas columnas especificas en java script ?.
Si el libro Excel tiene 10 columnas, pero yo solo quiero siete columnas pero en distinto orden para cargar mi tabla html.






(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)