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())
})
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.