Spaces:

jasvir-singh1021
/

Html_Doc_convertor

Running

App Files Files Community

Fanu2 commited on Jul 26, 2025

Commit

26da80c

1 Parent(s): 8fcb3b7

Updated design and layout

Browse files

Files changed (1) hide show

index.html +262 -287

index.html CHANGED Viewed

@@ -2,147 +2,147 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>HTML Table Extractor to DOC</title>
   <style>
     :root {
       --primary: #6366f1;
       --primary-dark: #4f46e5;
-      --bg: #f8fafc;
       --surface: #ffffff;
-      --text: #1e293b;
-      --text-muted: #64748b;
-      --border: #e2e8f0;
-      --success: #10b981;
       --error: #ef4444;
-      --radius: 0.75rem;
-      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     }
     * {
       box-sizing: border-box;
-      margin: 0;
-      padding: 0;
     }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       background: var(--bg);
       color: var(--text);
       line-height: 1.6;
-      min-height: 100vh;
-      display: grid;
-      place-items: center;
-      padding: 2rem;
     }
-    .app-container {
       width: 100%;
-      max-width: 900px;
-      margin: 0 auto;
     }
-    .header {
       text-align: center;
-      margin-bottom: 3rem;
-    }
-    .header h1 {
-      font-size: 2.5rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      margin-bottom: 0.5rem;
     }
-    .header p {
-      color: var(--text-muted);
-      font-size: 1.125rem;
     }
     .card {
       background: var(--surface);
-      border: 1px solid var(--border);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 2rem;
-      transition: box-shadow 0.3s ease;
     }
-    .card:hover {
-      box-shadow: var(--shadow-lg);
-    }
-    .upload-area {
       border: 2px dashed var(--border);
       border-radius: var(--radius);
-      padding: 3rem;
       text-align: center;
-      transition: all 0.3s ease;
       cursor: pointer;
-      position: relative;
     }
-    .upload-area:hover,
-    .upload-area.dragover {
       border-color: var(--primary);
-      background: linear-gradient(135deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
     }
     .upload-icon {
-      width: 64px;
-      height: 64px;
-      margin: 0 auto 1rem;
-      fill: var(--primary);
     }
     .upload-text {
       font-size: 1.125rem;
       font-weight: 600;
-      margin-bottom: 0.5rem;
     }
     .upload-hint {
-      color: var(--text-muted);
-      font-size: 0.875rem;
     }
     .file-input {
-      position: absolute;
-      inset: 0;
-      opacity: 0;
-      cursor: pointer;
     }
-    .preview-section {
       margin-top: 2rem;
-      display: none;
     }
-    .preview-section.show {
       display: block;
-      animation: fadeIn 0.3s ease;
     }
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
     }
-    .table-container {
       overflow-x: auto;
-      margin: 2rem 0;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
     }
     table {
@@ -153,300 +153,275 @@
     th, td {
       padding: 0.75rem;
-      text-align: left;
       border-bottom: 1px solid var(--border);
     }
     th {
-      background: var(--bg);
       font-weight: 600;
-      color: var(--text);
-    }
-    tr:hover {
-      background: rgba(99, 102, 241, 0.05);
     }
     .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 0.75rem 1.5rem;
       border: none;
-      border-radius: var(--radius);
       font-size: 1rem;
-      font-weight: 500;
       cursor: pointer;
-      transition: all 0.3s ease;
-      text-decoration: none;
-    }
-    .btn-primary {
-      background: var(--primary);
-      color: white;
     }
-    .btn-primary:hover {
       background: var(--primary-dark);
-      transform: translateY(-1px);
-      box-shadow: var(--shadow);
-    }
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none;
     }
-    .error {
-      background: rgba(239, 68, 68, 0.1);
-      border: 1px solid var(--error);
-      color: var(--error);
-      padding: 1rem;
-      border-radius: var(--radius);
       margin-top: 1rem;
-      display: none;
-    }
-    .success {
-      background: rgba(16, 185, 129, 0.1);
-      border: 1px solid var(--success);
-      color: var(--success);
       padding: 1rem;
       border-radius: var(--radius);
-      margin-top: 1rem;
-      display: none;
     }
-    .loading {
-      display: none;
-      text-align: center;
-      padding: 2rem;
     }
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid var(--border);
-      border-top-color: var(--primary);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin: 0 auto;
     }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
     }
-    @media (max-width: 640px) {
-      body {
-        padding: 1rem;
-      }
-      .header h1 {
-        font-size: 2rem;
       }
       .card {
         padding: 1.5rem;
       }
-      .upload-area {
-        padding: 2rem;
       }
     }
   </style>
 </head>
 <body>
-  <div class="app-container">
-    <div class="header">
-      <h1>HTML Table Extractor</h1>
-      <p>Convert your HTML tables to Word documents easily</p>
-    </div>
     <div class="card">
-      <div class="upload-area" id="uploadArea">
-        <svg class="upload-icon" viewBox="0 0 24 24">
-          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M13,13V7H11V13H8L12,17L16,13H13Z" />
-        </svg>
-        <div class="upload-text">Drop HTML file here or click to browse</div>
-        <div class="upload-hint">Supports .html and .htm files</div>
-        <input type="file" id="fileInput" class="file-input" accept=".html,.htm">
-      </div>
-      <div class="loading" id="loading">
-        <div class="spinner"></div>
-        <p>Processing file...</p>
-      </div>
-      <div class="error" id="error"></div>
-      <div class="success" id="success"></div>
-      <div class="preview-section" id="previewSection">
-        <h3>Extracted Table (First 7 columns)</h3>
-        <div class="table-container">
           <table id="previewTable"></table>
         </div>
-        <button class="btn btn-primary" id="downloadBtn">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M14,12L10,16H12.5V21H15.5V16H18L14,12Z" />
-          </svg>
-          Download as Word (.docx)
         </button>
-      </div>
     </div>
   </div>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
   <script>
-    const uploadArea = document.getElementById('uploadArea');
     const fileInput = document.getElementById('fileInput');
-    const loading = document.getElementById('loading');
-    const error = document.getElementById('error');
-    const success = document.getElementById('success');
-    const previewSection = document.getElementById('previewSection');
     const previewTable = document.getElementById('previewTable');
     const downloadBtn = document.getElementById('downloadBtn');
-    let currentDf = null;
-    // File upload handlers
-    uploadArea.addEventListener('click', () => fileInput.click());
-    uploadArea.addEventListener('dragover', handleDragOver);
-    uploadArea.addEventListener('drop', handleDrop);
-    uploadArea.addEventListener('dragleave', handleDragLeave);
-    fileInput.addEventListener('change', handleFileSelect);
-    function handleDragOver(e) {
       e.preventDefault();
-      uploadArea.classList.add('dragover');
-    }
-    function handleDragLeave(e) {
-      e.preventDefault();
-      uploadArea.classList.remove('dragover');
-    }
-    function handleDrop(e) {
       e.preventDefault();
-      uploadArea.classList.remove('dragover');
-      const file = e.dataTransfer.files[0];
-      if (file) processFile(file);
-    }
-    function handleFileSelect(e) {
-      const file = e.target.files[0];
-      if (file) processFile(file);
-    }
-    async function processFile(file) {
-      if (!file.name.endsWith('.html') && !file.name.endsWith('.htm')) {
-        showError('Please upload a valid HTML file.');
-        return;
       }
-      try {
-        loading.style.display = 'block';
-        uploadArea.style.display = 'none';
-        const content = await file.text();
-        const df = htmlTableToDf(content);
-        if (df === null) {
-          showError('No table found in the uploaded HTML file.');
-          return;
         }
-        currentDf = df;
-        displayTable(df);
-        showSuccess('File processed successfully!');
-      } catch (err) {
-        showError('Error processing file: ' + err.message);
-      } finally {
-        loading.style.display = 'none';
-      }
     }
-    function htmlTableToDf(htmlContent) {
       const parser = new DOMParser();
-      const doc = parser.parseFromString(htmlContent, 'text/html');
-      const table = doc.querySelector('table');
-      if (!table) return null;
-      const rows = Array.from(table.querySelectorAll('tr'));
-      const data = rows.map(row => {
-        const cells = Array.from(row.querySelectorAll('td, th'));
-        return cells.slice(0, 7).map(cell => cell.textContent.trim());
       });
-      return data;
     }
-    function displayTable(data) {
       previewTable.innerHTML = '';
-      const thead = document.createElement('thead');
-      const tbody = document.createElement('tbody');
-      data.forEach((row, index) => {
         const tr = document.createElement('tr');
-        row.forEach(cell => {
-          const cellElement = index === 0 ? document.createElement('th') : document.createElement('td');
-          cellElement.textContent = cell;
-          tr.appendChild(cellElement);
         });
-        if (index === 0) {
-          thead.appendChild(tr);
-        } else {
           tbody.appendChild(tr);
         }
-      });
-      previewTable.appendChild(thead);
-      previewTable.appendChild(tbody);
-      previewSection.classList.add('show');
     }
     downloadBtn.addEventListener('click', () => {
-      if (!currentDf) return;
-      const doc = createDocx(currentDf);
-      saveAs(doc, 'extracted_table.docx');
     });
-    function createDocx(data) {
-      const doc = new docx.Document();
-      const table = doc.addTable({
-        rows: data.length,
-        columns: data[0].length,
-      });
-      data.forEach((row, rowIndex) => {
-        row.forEach((cell, cellIndex) => {
-          const cellObj = table.getCell(rowIndex, cellIndex);
-          cellObj.addParagraph(cell);
         });
       });
-      return docx.Packer.toBlob(doc);
-    }
-    function showError(message) {
-      error.textContent = message;
-      error.style.display = 'block';
-      setTimeout(() => error.style.display = 'none', 5000);
     }
-    function showSuccess(message) {
-      success.textContent = message;
-      success.style.display = 'block';
-      setTimeout(() => success.style.display = 'none', 3000);
     }
   </script>
 </body>
-</html>

 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HTML Table to Word Converter</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     :root {
       --primary: #6366f1;
       --primary-dark: #4f46e5;
+      --bg: #f9fafb;
       --surface: #ffffff;
+      --text: #111827;
+      --muted: #6b7280;
+      --border: #e5e7eb;
       --error: #ef4444;
+      --success: #10b981;
+      --radius: 12px;
+      --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
     * {
       box-sizing: border-box;
     }
     body {
+      margin: 0;
+      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       background: var(--bg);
       color: var(--text);
       line-height: 1.6;
+      display: flex;
+      justify-content: center;
+      padding: 2rem 1rem;
     }
+    .app {
       width: 100%;
+      max-width: 640px;
     }
+    header {
       text-align: center;
+      margin-bottom: 2rem;
     }
+    h1 {
+      font-size: 2.25rem;
+      font-weight: 800;
+      margin: 0;
     }
     .card {
       background: var(--surface);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       padding: 2rem;
     }
+    .upload-zone {
       border: 2px dashed var(--border);
       border-radius: var(--radius);
+      padding: 3rem 2rem;
       text-align: center;
+      transition: border-color 0.3s, background-color 0.3s;
       cursor: pointer;
     }
+    .upload-zone:hover {
+      border-color: var(--primary);
+      background-color: #f3f4ff;
+    }
+    .upload-zone.dragover {
       border-color: var(--primary);
+      background-color: #e0e7ff;
     }
     .upload-icon {
+      font-size: 3rem;
+      color: var(--muted);
+      margin-bottom: 0.5rem;
     }
     .upload-text {
       font-size: 1.125rem;
       font-weight: 600;
+      margin: 0;
     }
     .upload-hint {
+      color: var(--muted);
+      margin-top: 0.5rem;
     }
     .file-input {
+      display: none;
+    }
+    .success {
+      color: var(--success);
+      font-weight: 600;
     }
+    .error {
+      color: var(--error);
+      font-weight: 600;
+    }
+    .info {
+      color: var(--muted);
+      margin-top: 0.5rem;
+    }
+    .controls {
       margin-top: 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
     }
+    label {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
       display: block;
     }
+    input[type="number"] {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      font-size: 1rem;
     }
+    input[type="number"]:focus {
+      border-color: var(--primary);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+    }
+    .preview {
       overflow-x: auto;
+      margin-top: 2rem;
     }
     table {
     th, td {
       padding: 0.75rem;
       border-bottom: 1px solid var(--border);
+      text-align: left;
     }
     th {
+      background-color: #f3f4f6;
       font-weight: 600;
     }
     .btn {
+      background: var(--primary);
+      color: #fff;
       border: none;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
       font-size: 1rem;
+      font-weight: 600;
       cursor: pointer;
+      transition: background-color 0.3s;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
     }
+    .btn:hover {
       background: var(--primary-dark);
     }
+    .status {
       margin-top: 1rem;
       padding: 1rem;
       border-radius: var(--radius);
     }
+    .status.success {
+      background: #ecfdf5;
+      color: var(--success);
     }
+    .status.error {
+      background: #fef2f2;
+      color: var(--error);
     }
+    .status.info {
+      background: #f3f4f6;
+      color: var(--muted);
     }
+    @media (max-width: 600px) {
+      h1 {
+        font-size: 1.75rem;
       }
       .card {
         padding: 1.5rem;
       }
+      .upload-zone {
+        padding: 2rem 1rem;
       }
     }
   </style>
 </head>
 <body>
+  <div class="app">
+    <header>
+      <h1>HTML Table to Word Converter</h1>
+    </header>
     <div class="card">
+      <form id="uploadForm">
+        <div class="upload-zone" id="dropZone">
+          <i class="fas fa-cloud-upload-alt upload-icon"></i>
+          <p class="upload-text">Upload HTML File</p>
+          <p class="upload-hint">Drag & drop or click to select</p>
+          <input type="file" id="fileInput" class="file-input" accept=".html,.htm" />
+        </div>
+        <div id="status" class="status" style="display: none;"></div>
+        <div id="controls" class="controls" style="display: none;">
+          <div>
+            <label for="skipRows">Rows to skip (from top)</label>
+            <input type="number" id="skipRows" min="0" value="1" />
+          </div>
+          <div>
+            <label for="numColumns">Number of columns to import</label>
+            <input type="number" id="numColumns" min="1" max="50" value="8" />
+          </div>
+        </div>
+        <div id="preview" class="preview" style="display: none;">
+          <h2>Extracted Table Preview</h2>
           <table id="previewTable"></table>
         </div>
+        <button type="button" id="downloadBtn" class="btn" style="display: none;">
+          <i class="fas fa-download"></i>Download as Word (.docx)
         </button>
+      </form>
     </div>
   </div>
   <script>
     const fileInput = document.getElementById('fileInput');
+    const dropZone = document.getElementById('dropZone');
+    const statusDiv = document.getElementById('status');
+    const controlsDiv = document.getElementById('controls');
+    const previewDiv = document.getElementById('preview');
     const previewTable = document.getElementById('previewTable');
     const downloadBtn = document.getElementById('downloadBtn');
+    const skipRowsInput = document.getElementById('skipRows');
+    const numColumnsInput = document.getElementById('numColumns');
+    let extractedTable = null;
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', (e) => {
       e.preventDefault();
+      dropZone.classList.add('dragover');
+    });
+    dropZone.addEventListener('dragleave', () => {
+      dropZone.classList.remove('dragover');
+    });
+    dropZone.addEventListener('drop', (e) => {
       e.preventDefault();
+      dropZone.classList.remove('dragover');
+      const files = e.dataTransfer.files;
+      if (files.length) {
+        handleFile(files[0]);
       }
+    });
+    fileInput.addEventListener('change', () => {
+      const file = fileInput.files[0];
+      if (file) {
+        handleFile(file);
+      }
+    });
+    function handleFile(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const html = e.target.result;
+          const tables = extractAllTables(html);
+          const validTables = tables.filter(t => t && t.length && t[0].length >= 5);
+          if (!validTables.length) {
+            showStatus("No valid tables found in the uploaded HTML file.", 'error');
+            return;
+          }
+          const largest = validTables.reduce((max, cur) => (cur.length > max.length ? cur : max), validTables[0]);
+          extractedTable = largest;
+          const maxCols = largest[0].length;
+          const maxRows = largest.length;
+          showStatus(`Found ${validTables.length} table(s). Using the largest one with ${maxRows} rows and ${maxCols} columns.`, 'success');
+          skipRowsInput.max = Math.max(maxRows - 1, 0);
+          skipRowsInput.value = maxRows <= 1 ? 0 : 1;
+          numColumnsInput.max = maxCols;
+          numColumnsInput.value = Math.min(8, maxCols);
+          controlsDiv.style.display = 'block';
+          previewTable.innerHTML = '';
+          updatePreview();
+        } catch (err) {
+          showStatus("An error occurred while processing the file.", 'error');
+          console.error(err);
         }
+      };
+      reader.readAsText(file);
     }
+    function extractAllTables(html) {
       const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      const tables = doc.querySelectorAll('table');
+      return Array.from(tables).map(table => {
+        const rows = Array.from(table.querySelectorAll('tr'));
+        return rows.map(row => {
+          const cells = Array.from(row.querySelectorAll('td, th'));
+          return cells.map(cell => cell.textContent.trim());
+        });
       });
     }
+    function updatePreview() {
+      if (!extractedTable) return;
+      const skip = parseInt(skipRowsInput.value, 10);
+      const cols = parseInt(numColumnsInput.value, 10);
+      const sliced = extractedTable.slice(skip).map(row => row.slice(0, cols));
       previewTable.innerHTML = '';
+      if (sliced.length > 0) {
+        const thead = document.createElement('thead');
         const tr = document.createElement('tr');
+        sliced[0].forEach(cell => {
+          const th = document.createElement('th');
+          th.textContent = cell;
+          tr.appendChild(th);
         });
+        thead.appendChild(tr);
+        previewTable.appendChild(thead);
+        const tbody = document.createElement('tbody');
+        for (let i = 1; i < sliced.length; i++) {
+          if (sliced[i].every(c => !c)) continue;
+          const tr = document.createElement('tr');
+          sliced[i].forEach(cell => {
+            const td = document.createElement('td');
+            td.textContent = cell;
+            tr.appendChild(td);
+          });
           tbody.appendChild(tr);
         }
+        previewTable.appendChild(tbody);
+      }
+      previewDiv.style.display = 'block';
+      downloadBtn.style.display = 'inline-flex';
     }
+    skipRowsInput.addEventListener('input', updatePreview);
+    numColumnsInput.addEventListener('input', updatePreview);
     downloadBtn.addEventListener('click', () => {
+      if (!extractedTable) return;
+      const skip = parseInt(skipRowsInput.value, 10);
+      const cols = parseInt(numColumnsInput.value, 10);
+      const sliced = extractedTable.slice(skip).map(row => row.slice(0, cols));
+      downloadTableAsDocx(sliced, 'extracted_table.docx');
     });
+    function downloadTableAsDocx(table, filename) {
+      let html = '<html><head><meta charset="UTF-8"></head><body><table>';
+      table.forEach(row => {
+        html += '<tr>';
+        row.forEach(cell => {
+          html += `<td>${cell}</td>`;
         });
+        html += '</tr>';
       });
+      html += '</table></body></html>';
+      const blob = new Blob([html], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
     }
+    function showStatus(message, type) {
+      statusDiv.textContent = message;
+      statusDiv.className = `status ${type}`;
+      statusDiv.style.display = 'block';
     }
   </script>
 </body>
+</html>