如何修改代码：用点击链接按钮替代上传展示Excel为HTML表格

原代码实现了上传本地Excel文件并在页面展示为表格的功能，现在修改为通过点击按钮直接加载指定远程Excel文件并展示表格，修改后的完整代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Load Excel to HTML Table using JavaScript</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 to HTML Table using JavaScript</h2>
        <div class="card">
            <div class="card-header"><b>Load Excel File</b></div>
            <div class="card-body">
                <!-- 替换上传控件为加载按钮 -->
                <button id="load_excel_btn" class="btn btn-primary">加载指定Excel文件</button>
            </div>
        </div>
        <div id="excel_data" class="mt-5"></div>
    </div>
</body>
</html>

<script>
// 封装表格生成逻辑，复用原有的处理代码
function generateTableFromExcelData(data) {
    const work_book = XLSX.read(data, {type:'array'});
    const sheet_name = work_book.SheetNames;
    const sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

    if(sheet_data.length > 0)
    {
        let table_output = '<table class="table table-striped table-bordered">';

        for(let row = 0; row < sheet_data.length; row++)
        {
            table_output += '<tr>';
            for(let cell = 0; cell < sheet_data[row].length; cell++)
            {
                if(row == 0)
                {
                    table_output += '<th>'+(sheet_data[row][cell] || '')+'</th>';
                }
                else
                {
                    table_output += '<td>'+(sheet_data[row][cell] || '')+'</td>';
                }
            }
            table_output += '</tr>';
        }

        table_output += '</table>';
        document.getElementById('excel_data').innerHTML = table_output;
    } else {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-warning">Excel文件中没有数据</div>';
    }
}

// 按钮点击事件：加载远程Excel文件
const load_btn = document.getElementById('load_excel_btn');
load_btn.addEventListener('click', async () => {
    // 替换成你的远程Excel文件地址
    const excelUrl = 'https://example.com/your-file.xlsx';
    const excelDataEl = document.getElementById('excel_data');
    
    try {
        load_btn.disabled = true;
        load_btn.textContent = '加载中...';
        excelDataEl.innerHTML = '<div class="alert alert-info">正在加载Excel文件...</div>';

        const response = await fetch(excelUrl);
        if(!response.ok) throw new Error('文件加载失败');
        
        const arrayBuffer = await response.arrayBuffer();
        generateTableFromExcelData(new Uint8Array(arrayBuffer));
    } catch(error) {
        excelDataEl.innerHTML = `<div class="alert alert-danger">加载失败：${error.message}</div>`;
    } finally {
        load_btn.disabled = false;
        load_btn.textContent = '加载指定Excel文件';
    }
});
</script>

修改说明： #

• 移除了原有的文件上传<input>控件，替换为一个带样式的加载按钮
• 将原有的表格生成逻辑封装成generateTableFromExcelData函数，便于复用和维护
• 添加了按钮点击事件，通过fetch请求远程Excel文件，同时处理加载状态、成功和错误提示
• 需要将代码中的excelUrl替换为你实际的Excel文件远程地址

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