Base64 PDF Viewer With jQuery And pdf.js - Easy-PDF

Easy-PDF is a jQuery based PDF viewer that parses and displays a based64 encoded PDF in a draggable, resizable jQuery UI dialog popup.

Dependencies:

• jQuery.
• jQuery UI.
• mozilla's pdf.js.

How to use it:

1. Include jQuery, jQuery UI, and pdf.js on the webpage.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css">

<!-- pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.489/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.489/pdf.worker.js"></script>

2. Download the place the jQuery Easy-PDF plugin's script right before the closing body tag.

<script src="js/easyPDF.js"></script>

3. Insert your PDF as a base64 string into the document.

myPDF = 'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
        'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
        'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
        'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
        'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
        'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
        'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
        'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
        'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
        'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
        'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
        'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
        'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G';

4. Display the based64 encoded PDF in a jQuery UI dialog and specify the dialog title displayed in the header.

easyPDF(myPDF, "PDF Name")

5. The default dialog settings.

$( "#pdfDialog" ).dialog({
  // Moves controls to top of dialog
  open: function (event, ui) {
    $(this).before($(this).parent().find('.ui-dialog-buttonpane'));
  },
  width: ($(window).width() / 2),
  modal: true,
  position: {
    my: "top",
    at: "top",
    of: window,
    collision: "none"
  },
  buttons: {
    "Back": {
      click: function () {
        RenderPDF(-1)
      },
      text: 'Previous',
    },
    "Next": {
      click: function () {
        RenderPDF(1)
      },
      text: 'Next',
    },
    "Confirm": {
      click: function () {
        $(this).dialog("close");
        $("#pdfDialog").remove()
      },
      text: 'Close',
    }
  }
});

Changelog:

2018-06-26

• Removed extraneous lines that broke demo.

---

This awesome jQuery plugin is developed by DaveAldon. For more Advanced Usages, please check the demo page or visit the official website.