Build a PDF Viewer & Editor in Browser Using PDFObject Library in HTML & Javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>View PDF in Browser using PDFObject</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.12/pdfobject.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #pdf-preview {
      margin-top: 20px;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

  <h2>📄 Select a PDF File to View</h2>
  <input type="file" id="fileInput" accept="application/pdf" />

  <div id="pdf-preview">Your PDF will appear here...</div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (!file || file.type !== 'application/pdf') {
        alert('Please select a valid PDF file');
        return;
      }

      const reader = new FileReader();
      reader.onload = function (e) {
        const pdfDataUrl = e.target.result;

        // Use PDFObject to embed the PDF in the div
        PDFObject.embed(pdfDataUrl, "#pdf-preview");
      };
      reader.readAsDataURL(file); // convert file to base64 DataURL
    });
  </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>View PDF in Browser using PDFObject</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

}

#pdf-preview {

margin-top: 20px;

height: 600px;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<h2>📄 Select a PDF File to View</h2>

<div id="pdf-preview">Your PDF will appear here...</div>

document.getElementById('fileInput').addEventListener('change', function (event) {

const file = event.target.files[0];

if (!file || file.type !== 'application/pdf') {

alert('Please select a valid PDF file');

return;

}

const reader = new FileReader();

reader.onload = function (e) {

const pdfDataUrl = e.target.result;

// Use PDFObject to embed the PDF in the div

PDFObject.embed(pdfDataUrl, "#pdf-preview");

};

reader.readAsDataURL(file); // convert file to base64 DataURL

});

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>View PDF in Browser using PDFObject</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.12/pdfobject.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #pdf-preview {
      margin-top: 20px;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

  <h2>📄 Select a PDF File to View</h2>
  <input type="file" id="fileInput" accept="application/pdf" />

  <div id="pdf-preview">Your PDF will appear here...</div>

  <script>
    document.getElementById('fileInput').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (!file || file.type !== 'application/pdf') {
        alert('Please select a valid PDF file');
        return;
      }

      const reader = new FileReader();
      reader.onload = function (e) {
        const pdfDataUrl = e.target.result;

        // Use PDFObject to embed the PDF in the div
        PDFObject.embed(pdfDataUrl, "#pdf-preview");
      };
      reader.readAsDataURL(file); // convert file to base64 DataURL
    });
  </script>

</body>
</html>