如何通过JavaScript从固定服务器路径加载Excel数据到HTML表格

以下是修改后的完整代码，实现页面加载时自动从服务器指定路径加载Excel文件并渲染为表格，同时移除了文件上传模块：

<html>
  <head>
    <meta charset="utf-8" />
    <title>Load Excel from Server to HTML Table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"  />

   <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>         
  </head>
  <body>
    <div class="container">
      <h2 class="text-center mt-4 mb-4">
        Load Excel from Server to HTML Table
      </h2>
      <div id="excel_data" class="mt-5"></div>
    </div>
    <script>
      // 服务器上Excel文件的固定路径
      const excelUrl = 'https://www.myserver.com/tabledata.xlsx';

      // 页面加载完成后自动执行加载逻辑
      window.addEventListener('load', async () => {
        try {
          // 请求Excel文件
          const response = await fetch(excelUrl);
          if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
          }
          // 将响应转为ArrayBuffer
          const data = await response.arrayBuffer();
          // 解析Excel文件
          const workBook = XLSX.read(data, { type: 'array' });
          // 获取第一个工作表的名称
          const sheetName = workBook.SheetNames[0];
          // 将工作表数据转为数组格式
          const sheetData = XLSX.utils.sheet_to_json(workBook.Sheets[sheetName], { header: 1 });

          if (sheetData.length > 0) {
            let tableOutput = '<table class="table table-striped table-bordered">';
            // 遍历行生成表格
            for (let row = 0; row < sheetData.length; row++) {
              tableOutput += "<tr>";
              for (let cell = 0; cell < sheetData[row].length; cell++) {
                // 第一行作为表头
                tableOutput += row === 0 ? `<th>${sheetData[row][cell] || ''}</th>` : `<td>${sheetData[row][cell] || ''}</td>`;
              }
              tableOutput += "</tr>";
            }
            tableOutput += "</table>";
            // 渲染表格到页面
            document.getElementById('excel_data').innerHTML = tableOutput;
          } else {
            document.getElementById('excel_data').innerHTML = '<div class="alert alert-warning">Excel文件中没有数据</div>';
          }
        } catch (error) {
          // 处理错误情况
          document.getElementById('excel_data').innerHTML = `<div class="alert alert-danger">加载Excel失败：${error.message}</div>`;
        }
      });
    </script>
  </body>
</html>

关键修改说明 #

• 移除上传模块：删除了原页面中用于选择本地文件的卡片和input元素，简化页面结构
• 自动加载逻辑：通过window.addEventListener('load', ...)实现页面加载完成后自动触发Excel加载流程
• 服务器文件请求：使用fetch API请求服务器上的Excel文件，替代原有的本地文件读取逻辑
• 错误处理：新增了请求失败、文件无数据等异常情况的提示，提升用户体验
• 数据兼容处理：在生成表格时对空单元格做了|| ''的处理，避免页面出现undefined

内容的提问来源于stack exchange，提问作者PRANAV