weixin_48515482 2023-05-19 13:29 采纳率: 42.9%
浏览 38

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

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

  • 写回答

1条回答 默认 最新

  • XCU_CH 2023-05-19 13:36
    关注

    要使用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 表格格式，并显示在网页上。

    评论

报告相同问题？

问题事件

  • 创建了问题 5月19日