JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Content Parser</title>
    <style>
        body { font-family: Arial, sans-serif; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>

<h1>PDF Content Parser</h1>
<div id="text-content"></div>
<div id="table-content"></div>



</body>
</html>

JavaScript

const url = 'https://drive.google.com/uc?id=1moviyNkmlo3_EaspCsYmIzKZChytk1Gj'; // Direct PDF link

    async function loadPdf(url) {
        const loadingTask = pdfjsLib.getDocument(url);
        const pdf = await loadingTask.promise;

        let textContent = '';
        let tableContent = [];

        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            const text = await page.getTextContent();
            textContent += text.items.map(item => item.str).join(' ') + '<br>';

            const items = text.items;
            const rows = [];
            let currentRow = [];

            items.forEach(item => {
                if (item.str.trim()) {
                    currentRow.push(item.str.trim());
                }
                if (currentRow.length > 3) {
                    rows.push(currentRow);
                    currentRow = [];
                }
            });

            if (currentRow.length > 0) rows.push(currentRow);
            tableContent.push(rows);
        }

        displayContent(textContent, tableContent);
    }

    function displayContent(textContent, tableContent) {
        document.getElementById('text-content').innerHTML = '<h2>Extracted Text</h2><pre>' + textContent + '</pre>';

        if (tableContent.length > 0) {
            let htmlTable = '<h2>Extracted Tables</h2>';
            tableContent.forEach((table, index) => {
                htmlTable += `<h3>Table ${index + 1}</h3><table>`;
                table.forEach(row => {
                    htmlTable += '<tr>' + row.map(cell => `<td>${cell}</td>`).join('') + '</tr>';
                });
                htmlTable += '</table>';
            });
            document.getElementById('table-content').innerHTML = htmlTable;
        }
    }

    loadPdf(url);