JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Preview</title>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="preview"></div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      if (file && file.name.endsWith('.xlsx')) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const arrayBuffer = event.target.result; console.log(arrayBuffer);
          processExcelFile(arrayBuffer);
        };
        reader.readAsArrayBuffer(file);
      } else {
        alert('Please upload a valid .xlsx file.');
      }
    });

    function processExcelFile(arrayBuffer) {
      // Parse the Excel file using SheetJS
      const workbook = XLSX.read(arrayBuffer, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];

      // Convert the sheet to HTML
      const html = XLSX.utils.sheet_to_html(sheet);

      // Display the HTML content in the preview div
      document.getElementById('preview').innerHTML = html;
    }
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</body>
</html>