新手技术求助：使用SheetJS API与Node.js处理Excel数据及浏览器兼容问题

阿华AIGC实验室

2026-4-29

Troubleshooting Browser Issues with SheetJS + Excel Data Handling for Beginners

Hey there! Let's break down your problems step by step since you're just starting out with JavaScript and Excel data workflows.

Why `require('xlsx')` breaks your browser code

First off, that require() function you're using is exclusive to Node.js—it's part of Node's module system for loading code from external files/packages. Browsers don't understand this syntax natively. When your browser hits that line of code, it throws an error, and JavaScript engines stop executing any code after the error. That's why your regular JS code stops working!

How to use SheetJS in the browser (no Node.js `require` needed)

You don't need Node.js to use SheetJS in the browser—there's a much simpler way for beginners:

Use the SheetJS CDN: Add this script tag to your HTML file before your custom JS code. This loads the SheetJS library directly into the browser, giving you access to a global XLSX object you can use instead of require.
```
<script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
```
If you want to use Node.js-style imports later (for bigger projects), you could learn tools like Webpack or Vite to bundle your code, but stick with the CDN for now—it's way easier to wrap your head around.

Let's build a practical example that does exactly what you want: lets users upload an Excel file, fills a dropdown with data from it, and populates a table when a dropdown option is selected.

Here's a complete, self-contained code snippet you can copy-paste into an HTML file and test:

<!DOCTYPE html>
<html>
<head>
  <title>Excel to Dropdown & Table</title>
  <!-- Load SheetJS via CDN -->
  <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
</head>
<body>
  <h3>Upload your Excel file</h3>
  <input type="file" id="excelFile" accept=".xlsx, .xls">
  
  <div style="margin-top: 15px;">
    <label for="itemDropdown">Select an item:</label>
    <select id="itemDropdown" disabled>
      <option value="">Choose from uploaded data...</option>
    </select>
  </div>

  <table id="dataTable" border="1" style="margin-top: 20px; display: none;">
    <thead></thead>
    <tbody></tbody>
  </table>

  <script>
    // Grab DOM elements we'll need
    const fileInput = document.getElementById('excelFile');
    const dropdown = document.getElementById('itemDropdown');
    const table = document.getElementById('dataTable');
    let parsedExcelData = []; // Store our Excel data once parsed

    // Listen for when a user uploads a file
    fileInput.addEventListener('change', (e) => {
      const selectedFile = e.target.files[0];
      if (!selectedFile) return;

      // Use FileReader to read the uploaded file
      const reader = new FileReader();
      reader.onload = (event) => {
        // Parse the Excel file with SheetJS
        const workbook = XLSX.read(event.target.result, { type: 'binary' });
        // Grab the first sheet in the Excel file
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        // Convert sheet data to JSON for easy manipulation
        parsedExcelData = XLSX.utils.sheet_to_json(worksheet);

        if (parsedExcelData.length === 0) {
          alert('No data found in your Excel file!');
          return;
        }

        // Fill the dropdown (we'll use the "Item Name" column from Excel—adjust this to your column name!)
        dropdown.disabled = false;
        dropdown.innerHTML = '<option value="">Choose from uploaded data...</option>';
        
        // Get unique items from the "Item Name" column (avoids duplicate dropdown options)
        const uniqueItems = [...new Set(parsedExcelData.map(row => row['Item Name']))];
        uniqueItems.forEach(item => {
          const option = document.createElement('option');
          option.value = item;
          option.textContent = item;
          dropdown.appendChild(option);
        });
      };

      // Read the file as binary (required for SheetJS)
      reader.readAsBinaryString(selectedFile);
    });

    // Listen for dropdown selection changes
    dropdown.addEventListener('change', (e) => {
      const selectedItem = e.target.value;
      if (!selectedItem) {
        table.style.display = 'none';
        return;
      }

      // Filter data to match the selected dropdown item
      const filteredRows = parsedExcelData.filter(row => row['Item Name'] === selectedItem);
      if (filteredRows.length === 0) {
        table.style.display = 'none';
        alert('No data found for this item!');
        return;
      }

      // Fill the table headers
      const columnHeaders = Object.keys(filteredRows[0]);
      const tableHeader = table.querySelector('thead');
      tableHeader.innerHTML = '<tr>' + columnHeaders.map(header => `<th>${header}</th>`).join('') + '</tr>';

      // Fill the table body with rows
      const tableBody = table.querySelector('tbody');
      tableBody.innerHTML = filteredRows.map(row => {
        return '<tr>' + columnHeaders.map(header => `<td>${row[header] || ''}</td>`).join('') + '</tr>';
      }).join('');

      // Show the table
      table.style.display = 'table';
    });
  </script>
</body>
</html>

Quick notes to customize this for your Excel file:

Replace 'Item Name' with the exact name of the column in your Excel file that you want to use for the dropdown.
If your Excel has multiple sheets, you can adjust the code to let users pick a sheet instead of using the first one.

Start by testing this with your own Excel file—you'll see exactly how the data flows from upload to dropdown to table, which will help you understand the logic better.

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