Spaces:

Translsis
/

GTVT

Running

App Files Files Community

Translsis commited on Dec 16, 2025

Commit

39ab88f

verified ·

1 Parent(s): e818e7d

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -65

index.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PDF Tab Viewer</title>
     <style>
         * {
             margin: 0;
@@ -199,13 +200,56 @@
             }
         }
-        .pdf-viewer {
-            width: 100%;
-            height: 700px;
             border: 2px solid #e9ecef;
             border-radius: 10px;
             background: #f8f9fa;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
         .empty-state {
@@ -229,13 +273,21 @@
         .empty-state p {
             font-size: 1.1em;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <h1>📄 PDF Tab Viewer</h1>
-            <p>Chọn hoặc kéo thả nhiều file PDF để xem</p>
         </div>
         <div class="upload-section">
@@ -265,6 +317,9 @@
     </div>
     <script>
         const uploadArea = document.getElementById('uploadArea');
         const fileInput = document.getElementById('fileInput');
         const tabsContainer = document.getElementById('tabs');
@@ -272,19 +327,16 @@
         const fileCountEl = document.getElementById('fileCount');
         let pdfFiles = [];
         let activeIndex = 0;
-        // Click to select files
-        uploadArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-        // File input change
         fileInput.addEventListener('change', (e) => {
             handleFiles(e.target.files);
         });
-        // Drag and drop
         uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
             uploadArea.classList.add('dragover');
@@ -305,28 +357,25 @@
             if (files.length === 0) return;
             const newFiles = Array.from(files);
             pdfFiles = [...pdfFiles, ...newFiles];
-            // Update file count
             fileCountEl.style.display = 'inline-block';
             fileCountEl.textContent = `${pdfFiles.length} file đã chọn`;
-            // Add new tabs and content
             newFiles.forEach((file, idx) => {
-                const fileIndex = pdfFiles.length - newFiles.length + idx;
                 addTab(file, fileIndex);
             });
-            // Activate first new file
             if (newFiles.length > 0) {
-                switchTab(pdfFiles.length - newFiles.length);
             }
         }
         function addTab(file, index) {
-            // Create tab
             const tab = document.createElement('button');
-            tab.className = 'tab' + (pdfFiles.length === 1 ? ' active' : '');
             tab.innerHTML = `
                 <span>📄</span>
                 <span>${file.name}</span>
@@ -336,90 +385,122 @@
             tab.dataset.index = index;
             tabsContainer.appendChild(tab);
-            // Create content
             const tabContent = document.createElement('div');
-            tabContent.className = 'tab-content' + (pdfFiles.length === 1 ? ' active' : '');
             tabContent.dataset.index = index;
-            // Create PDF viewer - dùng object thay vì embed
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const objectEl = document.createElement('object');
-                objectEl.data = e.target.result;
-                objectEl.type = 'application/pdf';
-                objectEl.className = 'pdf-viewer';
-                // Fallback nếu không load được
-                objectEl.innerHTML = `
-                    <div style="padding: 50px; text-align: center;">
-                        <h2>📄 ${file.name}</h2>
-                        <p style="margin: 20px 0; color: #6c757d;">Trình duyệt không hỗ trợ xem PDF trực tiếp</p>
-                        <a href="${e.target.result}" download="${file.name}"
-                           style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                                  color: white; padding: 15px 30px; border-radius: 50px;
-                                  text-decoration: none; display: inline-block; font-weight: bold;">
-                            ⬇️ Tải xuống PDF
-                        </a>
-                        <p style="margin-top: 20px; color: #6c757d; font-size: 0.9em;">
-                            Hoặc mở bằng: Chrome, Edge, Firefox (phiên bản mới nhất)
-                        </p>
-                    </div>
-                `;
-                tabContent.appendChild(objectEl);
-            };
-            reader.readAsDataURL(file);
             contentContainer.innerHTML = '';
             const allContents = document.querySelectorAll('.tab-content');
             allContents.forEach(c => contentContainer.appendChild(c));
             contentContainer.appendChild(tabContent);
         }
         function switchTab(index) {
             activeIndex = index;
-            // Update tabs
             const tabs = tabsContainer.querySelectorAll('.tab');
-            tabs.forEach((tab, i) => {
                 tab.classList.toggle('active', parseInt(tab.dataset.index) === index);
             });
-            // Update content
             const contents = contentContainer.querySelectorAll('.tab-content');
-            contents.forEach((content, i) => {
                 content.classList.toggle('active', parseInt(content.dataset.index) === index);
             });
         }
         function closeTab(index) {
-            // Remove from array
             pdfFiles.splice(index, 1);
-            // Remove tab
             const tab = tabsContainer.querySelector(`[data-index="${index}"]`);
             if (tab) tab.remove();
-            // Remove content
             const content = contentContainer.querySelector(`[data-index="${index}"]`);
             if (content) content.remove();
-            // Update indices
             const tabs = tabsContainer.querySelectorAll('.tab');
-            tabs.forEach((tab, i) => {
-                if (parseInt(tab.dataset.index) > index) {
-                    tab.dataset.index = parseInt(tab.dataset.index) - 1;
                 }
             });
             const contents = contentContainer.querySelectorAll('.tab-content');
-            contents.forEach((content, i) => {
-                if (parseInt(content.dataset.index) > index) {
-                    content.dataset.index = parseInt(content.dataset.index) - 1;
                 }
             });
-            // Update file count
             if (pdfFiles.length === 0) {
                 fileCountEl.style.display = 'none';
                 contentContainer.innerHTML = `
@@ -436,7 +517,6 @@
                 `;
             } else {
                 fileCountEl.textContent = `${pdfFiles.length} file đã chọn`;
-                // Switch to first tab if active was closed
                 if (activeIndex >= pdfFiles.length) {
                     switchTab(Math.max(0, pdfFiles.length - 1));
                 }

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PDF Tab Viewer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
     <style>
         * {
             margin: 0;
             }
         }
+        .pdf-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .pdf-controls button {
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        .pdf-controls button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+        .pdf-controls button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .pdf-controls span {
+            font-weight: bold;
+            color: #495057;
+        }
+        .pdf-viewer-container {
             border: 2px solid #e9ecef;
             border-radius: 10px;
             background: #f8f9fa;
+            padding: 20px;
+            overflow: auto;
+            max-height: 700px;
+        }
+        .pdf-canvas {
+            display: block;
+            margin: 0 auto;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         }
         .empty-state {
         .empty-state p {
             font-size: 1.1em;
         }
+        .loading {
+            text-align: center;
+            padding: 50px;
+            color: #667eea;
+            font-size: 1.2em;
+            font-weight: bold;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <h1>📄 PDF Tab Viewer</h1>
+            <p>Chọn hoặc kéo thả nhiều file PDF để xem (hỗ trợ mọi trình duyệt)</p>
         </div>
         <div class="upload-section">
     </div>
     <script>
+        // Setup PDF.js worker
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
         const uploadArea = document.getElementById('uploadArea');
         const fileInput = document.getElementById('fileInput');
         const tabsContainer = document.getElementById('tabs');
         const fileCountEl = document.getElementById('fileCount');
         let pdfFiles = [];
+        let pdfDocs = [];
+        let currentPages = [];
         let activeIndex = 0;
+        uploadArea.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
             handleFiles(e.target.files);
         });
         uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
             uploadArea.classList.add('dragover');
             if (files.length === 0) return;
             const newFiles = Array.from(files);
+            const startIndex = pdfFiles.length;
             pdfFiles = [...pdfFiles, ...newFiles];
             fileCountEl.style.display = 'inline-block';
             fileCountEl.textContent = `${pdfFiles.length} file đã chọn`;
             newFiles.forEach((file, idx) => {
+                const fileIndex = startIndex + idx;
                 addTab(file, fileIndex);
             });
             if (newFiles.length > 0) {
+                switchTab(startIndex);
             }
         }
         function addTab(file, index) {
             const tab = document.createElement('button');
+            tab.className = 'tab' + (index === 0 ? ' active' : '');
             tab.innerHTML = `
                 <span>📄</span>
                 <span>${file.name}</span>
             tab.dataset.index = index;
             tabsContainer.appendChild(tab);
             const tabContent = document.createElement('div');
+            tabContent.className = 'tab-content' + (index === 0 ? ' active' : '');
             tabContent.dataset.index = index;
+            tabContent.innerHTML = '<div class="loading">⏳ Đang tải PDF...</div>';
             contentContainer.innerHTML = '';
             const allContents = document.querySelectorAll('.tab-content');
             allContents.forEach(c => contentContainer.appendChild(c));
             contentContainer.appendChild(tabContent);
+            loadPDF(file, index, tabContent);
+        }
+        async function loadPDF(file, index, container) {
+            try {
+                const arrayBuffer = await file.arrayBuffer();
+                const pdf = await pdfjsLib.getDocument({data: arrayBuffer}).promise;
+                pdfDocs[index] = pdf;
+                currentPages[index] = 1;
+                container.innerHTML = `
+                    <div class="pdf-controls">
+                        <button onclick="changePage(${index}, -1)">◀ Trang trước</button>
+                        <span>Trang <span id="pageNum${index}">1</span> / <span id="pageCount${index}">${pdf.numPages}</span></span>
+                        <button onclick="changePage(${index}, 1)">Trang sau ▶</button>
+                    </div>
+                    <div class="pdf-viewer-container">
+                        <canvas id="pdfCanvas${index}" class="pdf-canvas"></canvas>
+                    </div>
+                `;
+                renderPage(index, 1);
+            } catch (error) {
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 50px; color: #dc3545;">
+                        <h2>❌ Lỗi khi tải PDF</h2>
+                        <p>${error.message}</p>
+                    </div>
+                `;
+            }
+        }
+        async function renderPage(index, pageNum) {
+            const pdf = pdfDocs[index];
+            const page = await pdf.getPage(pageNum);
+            const canvas = document.getElementById(`pdfCanvas${index}`);
+            const context = canvas.getContext('2d');
+            const viewport = page.getViewport({scale: 1.5});
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+            await page.render({
+                canvasContext: context,
+                viewport: viewport
+            }).promise;
+            currentPages[index] = pageNum;
+            document.getElementById(`pageNum${index}`).textContent = pageNum;
+        }
+        function changePage(index, delta) {
+            const newPage = currentPages[index] + delta;
+            const pdf = pdfDocs[index];
+            if (newPage >= 1 && newPage <= pdf.numPages) {
+                renderPage(index, newPage);
+            }
         }
         function switchTab(index) {
             activeIndex = index;
             const tabs = tabsContainer.querySelectorAll('.tab');
+            tabs.forEach((tab) => {
                 tab.classList.toggle('active', parseInt(tab.dataset.index) === index);
             });
             const contents = contentContainer.querySelectorAll('.tab-content');
+            contents.forEach((content) => {
                 content.classList.toggle('active', parseInt(content.dataset.index) === index);
             });
         }
         function closeTab(index) {
             pdfFiles.splice(index, 1);
+            pdfDocs.splice(index, 1);
+            currentPages.splice(index, 1);
             const tab = tabsContainer.querySelector(`[data-index="${index}"]`);
             if (tab) tab.remove();
             const content = contentContainer.querySelector(`[data-index="${index}"]`);
             if (content) content.remove();
             const tabs = tabsContainer.querySelectorAll('.tab');
+            tabs.forEach((tab) => {
+                const idx = parseInt(tab.dataset.index);
+                if (idx > index) {
+                    tab.dataset.index = idx - 1;
+                    const closeBtn = tab.querySelector('.close-tab');
+                    closeBtn.setAttribute('onclick', `event.stopPropagation(); closeTab(${idx - 1})`);
+                    tab.onclick = () => switchTab(idx - 1);
                 }
             });
             const contents = contentContainer.querySelectorAll('.tab-content');
+            contents.forEach((content) => {
+                const idx = parseInt(content.dataset.index);
+                if (idx > index) {
+                    content.dataset.index = idx - 1;
                 }
             });
             if (pdfFiles.length === 0) {
                 fileCountEl.style.display = 'none';
                 contentContainer.innerHTML = `
                 `;
             } else {
                 fileCountEl.textContent = `${pdfFiles.length} file đã chọn`;
                 if (activeIndex >= pdfFiles.length) {
                     switchTab(Math.max(0, pdfFiles.length - 1));
                 }