File "pdf03.php"

Full Path: /home/analogde/www/Prog/File explorer/pdf03.php
File size: 2.66 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Embed PDF File in HTML</title>
    <style>

    </style>
</head>

<body>
    <div class="phppot-container">
        <h1>How to Embed PDF File in HTML</h1>
        <div id="error-message" class="error" style="display: none;">Invalid PDF file. Please select a valid PDF file.
        </div>
        <input type="file" id="pdf-input" class="row" accept=".pdf" onchange="loadPDF(this)">
        <div class="pdf-embed-container" id="pdf-header" style="display: none;">
            <h2 id="pdf-filename">PDF File: <span id="filename"></span></h2>
            <div id="pdf-embed"></div>
        </div>
    </div>

    <script>
        function loadPDF(input) {
            // Get the chosen file binary from the input type=file
            var file = input.files[0];

            // Get references embed PDF on a page
            var errorMessage = document.getElementById('error-message');
            var pdfContainer = document.getElementById('pdf-embed');
            var pdfHeader = document.getElementById('pdf-header');
            var filenameSpan = document.getElementById('filename');

            // Clear error message from the screen initially
            errorMessage.style.display = 'none';

            // Validate if the chosen file type is PDF
            if (file && file.type === 'application/pdf') {
                // Create a data URL for the PDF file
                var pdfPath = URL.createObjectURL(file);

                // Create a target iframe element to embed the PDF
                var iframe = document.createElement('iframe');
                iframe.src = pdfPath;
                iframe.width = '100%';
                iframe.height = '100%';
                iframe.style.border = 'none';

                // Clear the existing and embed recently chosen PDF on a page
                pdfContainer.innerHTML = '';
                pdfContainer.appendChild(iframe);

                // Display the PDF filename above the embed
                filenameSpan.textContent = file.name;
                
                // Display the PDF container and header
                pdfContainer.style.display = 'block';
                pdfHeader.style.display = 'block';
            } else {
                // Display an error message if the selected file is not a PDF
                errorMessage.style.display = 'block';
                pdfContainer.style.display = 'none';
                pdfHeader.style.display = 'none';
            }
        }
    </script>
</body>

</html>