{"id":2543,"date":"2024-10-07T00:59:27","date_gmt":"2024-10-06T17:59:27","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=2543"},"modified":"2025-03-28T14:50:01","modified_gmt":"2025-03-28T07:50:01","slug":"list-pdf-from-google-drive","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=2543","title":{"rendered":"list pdf from google drive"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c PDF<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.6.7\/axios.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.min.js\"><\/script>\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Open Sans', sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f0f0f0;\n        }\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n        .form-container {\n            background-color: white;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            margin-bottom: 20px;\n        }\n        .form-container input[type=\"text\"] {\n            width: calc(100% - 120px);\n            padding: 10px;\n            margin-right: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n        }\n        .form-container button {\n            width: 100px;\n            background-color: #3498db;\n            color: white;\n            border: none;\n            padding: 10px 15px;\n            border-radius: 5px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n        }\n        .form-container button:hover {\n            background-color: #2980b9;\n        }\n        .pdf-table {\n            width: 100%;\n            border-collapse: collapse;\n            background-color: white;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n        .pdf-table th, .pdf-table td {\n            padding: 15px;\n            text-align: left;\n            border-bottom: 1px solid #ddd;\n        }\n        .pdf-table th {\n            background-color: #3498db;\n            color: white;\n        }\n        .pdf-table tr:hover {\n            background-color: #f5f5f5;\n        }\n        .pdf-cover {\n            width: 100px;\n            height: 141px; \/* Aspect ratio 1:1.414 for A4 *\/\n            object-fit: cover;\n            border-radius: 5px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }\n        .pdf-link {\n            color: #3498db;\n            text-decoration: none;\n            transition: color 0.3s ease;\n        }\n        .pdf-link:hover {\n            color: #2980b9;\n            text-decoration: underline;\n        }\n        .pdf-pagination {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin: 20px 0;\n        }\n        .pdf-pagination button {\n            background-color: #3498db;\n            color: white;\n            border: none;\n            padding: 10px 15px;\n            margin: 0 5px;\n            cursor: pointer;\n            border-radius: 5px;\n            transition: background-color 0.3s ease;\n        }\n        .pdf-pagination button:hover {\n            background-color: #2980b9;\n        }\n        .pdf-pagination button:disabled {\n            background-color: #bdc3c7;\n            cursor: not-allowed;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"form-container\">\n            <input type=\"text\" id=\"folderIdInput\" placeholder=\"\u0e43\u0e2a\u0e48 Folder ID \u0e02\u0e2d\u0e07 Google Drive\">\n            <button onclick=\"loadPDFs()\">\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c PDF<\/button>\n        <\/div>\n        <table id=\"pdfTable\" class=\"pdf-table\">\n            <thead>\n                <tr>\n                    <th>\u0e1b\u0e01<\/th>\n                    <th>\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c<\/th>\n                    <th>\u0e25\u0e34\u0e07\u0e04\u0e4c<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"pdfTableBody\"><\/tbody>\n        <\/table>\n        <div id=\"pdfPagination\" class=\"pdf-pagination\"><\/div>\n    <\/div>\n\n    <script>\n        const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n        let FOLDER_ID = '';\n        const PDF_PER_PAGE = 30;\n        let allPDFs = [];\n        let currentPage = 1;\n\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.worker.min.js';\n\n        async function loadPDFs() {\n            FOLDER_ID = document.getElementById('folderIdInput').value.trim();\n            if (!FOLDER_ID) {\n                alert('\u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48 Folder ID');\n                return;\n            }\n\n            try {\n                const response = await axios.get(`https:\/\/www.googleapis.com\/drive\/v3\/files`, {\n                    params: {\n                        q: `'${FOLDER_ID}' in parents and mimeType='application\/pdf'`,\n                        fields: 'files(id, name, webViewLink)',\n                        key: API_KEY\n                    }\n                });\n\n                allPDFs = response.data.files.sort((a, b) => a.name.localeCompare(b.name));\n                displayPDFs(1);\n                setupPagination();\n            } catch (error) {\n                console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e1f\u0e25\u0e4c PDF:', error);\n                document.getElementById('pdfTableBody').innerHTML = '<tr><td colspan=\"3\" style=\"color: red; text-align: center;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e1f\u0e25\u0e4c PDF \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/td><\/tr>';\n            }\n        }\n\n        async function displayPDFs(page) {\n            const tableBody = document.getElementById('pdfTableBody');\n            const startIndex = (page - 1) * PDF_PER_PAGE;\n            const endIndex = startIndex + PDF_PER_PAGE;\n            const pagePDFs = allPDFs.slice(startIndex, endIndex);\n\n            tableBody.innerHTML = '';\n            for (const pdf of pagePDFs) {\n                const row = document.createElement('tr');\n                \n                const coverCell = document.createElement('td');\n                const coverImg = document.createElement('img');\n                coverImg.className = 'pdf-cover';\n                coverImg.alt = pdf.name;\n                coverImg.title = pdf.name;\n                \n                try {\n                    const pdfDoc = await pdfjsLib.getDocument(`https:\/\/www.googleapis.com\/drive\/v3\/files\/${pdf.id}?alt=media&key=${API_KEY}`).promise;\n                    const page = await pdfDoc.getPage(1);\n                    const viewport = page.getViewport({ scale: 1 });\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    canvas.height = viewport.height;\n                    canvas.width = viewport.width;\n                    await page.render({ canvasContext: context, viewport: viewport }).promise;\n                    coverImg.src = canvas.toDataURL();\n                } catch (error) {\n                    console.error('Error rendering PDF thumbnail:', error);\n                    coverImg.src = 'https:\/\/via.placeholder.com\/100x141?text=PDF+Preview+Unavailable';\n                }\n                \n                coverCell.appendChild(coverImg);\n                row.appendChild(coverCell);\n\n                const nameCell = document.createElement('td');\n                nameCell.textContent = pdf.name;\n                row.appendChild(nameCell);\n\n                const linkCell = document.createElement('td');\n                const link = document.createElement('a');\n                link.href = pdf.webViewLink;\n                link.textContent = '\u0e40\u0e1b\u0e34\u0e14\u0e44\u0e1f\u0e25\u0e4c';\n                link.className = 'pdf-link';\n                link.target = '_blank';\n                linkCell.appendChild(link);\n                row.appendChild(linkCell);\n\n                tableBody.appendChild(row);\n            }\n\n            currentPage = page;\n            updatePaginationButtons();\n        }\n\n        function setupPagination() {\n            const totalPages = Math.ceil(allPDFs.length \/ PDF_PER_PAGE);\n            const pagination = document.getElementById('pdfPagination');\n            pagination.innerHTML = '';\n\n            const prevButton = createButton('\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32', () => displayPDFs(currentPage - 1));\n            pagination.appendChild(prevButton);\n\n            for (let i = 1; i <= totalPages; i++) {\n                const pageButton = createButton(i.toString(), () => displayPDFs(i));\n                pagination.appendChild(pageButton);\n            }\n\n            const nextButton = createButton('\u0e16\u0e31\u0e14\u0e44\u0e1b', () => displayPDFs(currentPage + 1));\n            pagination.appendChild(nextButton);\n\n            updatePaginationButtons();\n        }\n\n        function createButton(text, onClick) {\n            const button = document.createElement('button');\n            button.textContent = text;\n            button.onclick = onClick;\n            return button;\n        }\n\n        function updatePaginationButtons() {\n            const buttons = document.querySelectorAll('.pdf-pagination button');\n            const totalPages = Math.ceil(allPDFs.length \/ PDF_PER_PAGE);\n\n            buttons.forEach(button => {\n                if (button.textContent === '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32') {\n                    button.disabled = currentPage === 1;\n                } else if (button.textContent === '\u0e16\u0e31\u0e14\u0e44\u0e1b') {\n                    button.disabled = currentPage === totalPages;\n                } else {\n                    button.disabled = parseInt(button.textContent) === currentPage;\n                }\n            });\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e44\u0e1f\u0e25\u0e4c PDF \u0e42\u0e2b\u0e25\u0e14\u0e44<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-2543","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2543"}],"version-history":[{"count":3,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2543\/revisions"}],"predecessor-version":[{"id":5076,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2543\/revisions\/5076"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}