怎么用js读取本地XLS表格,不用选择浏览,读取固定的表格

怎么用js自动读取本地固定xls表格,并将内容显示在html页面

要使用JavaScript自动读取本地固定xls表格文件并在HTML页面中显示内容,可以采用以下步骤:

1、创建一个 HTML 文件。在其中创建一个具有 ID 的元素和一个具有 ID 的

元素。

<!DOCTYPE html>
<html>
<head>
  <title>Excel to HTML</title>
</head>
<body>
  <input type="file" id="input"/>
  <br><br>
  <table id="table"></table>
  <script src="exceltohtml.js"></script>
</body>
</html>

2、使用 JavaScript 创建一个函数来处理文件上传事件,并将 Excel 格式的数据转换为 HTML 表格格式。可以使用 js-xlsx 库https://github.com/SheetJS/js-xlsx 来实现将 Excel 文件转换为 JSON 数据。

function handleFile() {
 const inputFile = document.getElementById("input").files[0];
 const reader = new FileReader();
 reader.readAsBinaryString(inputFile);
 reader.onload = function(event) {
   const data = event.target.result;
   const workbook = XLSX.read(data, {type: 'binary'});
   const sheetName = workbook.SheetNames[0];
   const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: 1});

   const tableEl = document.getElementById("table");

   // 创建表头
   let tr = document.createElement("tr");
   for(let i=0;i<sheetData[0].length;i++){
     let th = document.createElement("th");
     th.innerHTML=sheetData[0][i];
     tr.appendChild(th);
   }
   tableEl.appendChild(tr);

   // 插入每行数据
   for(let i=1;i<sheetData.length;i++){
     let tr = document.createElement("tr");
     for(let j=0;j<sheetData[i].length;j++){
       let td = document.createElement("td");
       td.innerHTML=sheetData[i][j];
       tr.appendChild(td);
     }
     tableEl.appendChild(tr);
   }
 };
}

3、将 js-xlsx 库引入到 HTML 文件中。

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

4、在 HTML 文件中添加对刚刚创建的函数的调用,并将 HTML、CSS 样式应用于表。

<script>
    input.onchange = handleFile;
</script>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #e6e6e6;
  }
</style>

这样,当用户通过在页面上选择文件并上传时,JavaScript 函数会自动读取 Excel 表中的内容,并将其转换为 HTML 表格格式,并显示在网页上。