如何将代码中的本地XLSX文件上传功能修改为读取远程URL地址的XLSX文件

Got it, let's refactor your existing code to replace local XLSX file uploads with loading from a remote URL. Here's a complete, step-by-step solution:

Step 1: Update the HTML Structure #

First, swap out the file input with a text field where users can paste the Excel file's URL. We'll also adjust the button text and click handler to match the new functionality:

<html>
<input type="text" id="excelUrl" placeholder="Paste your Excel file URL here" />
<input type="button" id="loadExcel" value="Load Excel from URL" onclick="LoadExcelFromUrl()" />
<br/>
<div id="ExcelTable"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<!-- Your existing GetTableFromExcel function goes here -->
</html>

Step 2: Replace Upload Logic with URL Loading #

Replace your UploadProcess function with this new LoadExcelFromUrl function. It uses the fetch API to grab the remote file, processes the binary data, and feeds it into your existing Excel-to-table rendering logic:

function LoadExcelFromUrl() {
    const excelUrl = document.getElementById("excelUrl").value.trim();
    
    // Validate URL isn't empty
    if (!excelUrl) {
        alert("Please enter a valid Excel file URL.");
        return;
    }

    // Validate URL points to an Excel file
    const regex = /^.+\.(xls|xlsx)$/i;
    if (!regex.test(excelUrl)) {
        alert("Please enter a URL pointing to a .xls or .xlsx file.");
        return;
    }

    // Fetch the remote Excel file
    fetch(excelUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Failed to load file: ${response.status} ${response.statusText}`);
            }
            return response.arrayBuffer(); // Retrieve binary data
        })
        .then(arrayBuffer => {
            // Convert ArrayBuffer to binary string (matches your existing function's input format)
            const data = new Uint8Array(arrayBuffer);
            let binaryString = '';
            for (let i = 0; i < data.byteLength; i++) {
                binaryString += String.fromCharCode(data[i]);
            }
            // Pass to your existing Excel processing logic
            GetTableFromExcel(binaryString);
        })
        .catch(error => {
            alert(`Error loading Excel file: ${error.message}`);
            console.error(error);
        });
}

// Keep your existing GetTableFromExcel function here (example included for reference)
function GetTableFromExcel(data) {
    const workbook = XLSX.read(data, { type: 'binary' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const htmlTable = XLSX.utils.sheet_to_html(worksheet);
    document.getElementById("ExcelTable").innerHTML = htmlTable;
}

Key Notes & Troubleshooting #

• CORS Restrictions: If the remote server doesn't allow cross-origin requests (CORS), this will fail. Fix this by either using a proxy server to fetch the file, or ensuring the target server includes CORS headers that allow your domain.
• File Accessibility: The URL must point to a publicly accessible Excel file (no login required unless you add authentication headers to the fetch call).
• Browser Support: This uses the modern fetch API, which works in all up-to-date browsers. For older IE support, replace fetch with XMLHttpRequest.

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