From f2c458584448bdc1e1ee1cf4e436c87da11692f0 Mon Sep 17 00:00:00 2001
From: "Carlos A." <caralla@upv.es>
Date: Wed, 1 May 2024 10:18:12 +0200
Subject: [PATCH] update examples

---
 examples/example.html          | 274 ++++++++++++++++++---------------
 examples/mostsimple.html       |  16 +-
 examples/simpledoc.html        |  21 ++-
 examples/simpledoctoolbar.html |  25 +--
 examples/simpler.html          |  10 +-
 5 files changed, 193 insertions(+), 153 deletions(-)

diff --git a/examples/example.html b/examples/example.html
index 5a88e82..57aff02 100644
--- a/examples/example.html
+++ b/examples/example.html
@@ -6,14 +6,16 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
-    <script src="../js/pdfjs-viewer.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs" type="module"></script>
     <link rel="stylesheet" href="../css/pdfjs-viewer.css">
-    <link rel="stylesheet" href="../css/pdfjs-toolbar.css">
-    <script>
-    var pdfjsLib = window['pdfjs-dist/build/pdf'];
-    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
+    <link rel="stylesheet" href="../css/pdftoolbar.css">
+    <script type="module">
+    var { pdfjsLib } = globalThis;
+
+    // The workerSrc property shall be specified.
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';
     </script>
+    <script src="../js/pdfjs-viewer.js"></script>
     <style>
         body {
             font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -82,32 +84,33 @@
             <input id="pageno" class="pageno" type="number" class="form-control form-control-sm d-inline w-auto" value="1" min="1" max="1000" onchange="pdfViewer.scrollToPage(parseInt(this.value))">
             <span id="pagecount" class="pageno"></span>
             <div class="divider"></div>
-            <button onclick="pdfViewer.setZoom('in')"><i class="material-icons-outlined">add</i></button>
+            <button onclick="setZoom('in')"><i class="material-icons-outlined">add</i></button>
             <div class="v-sep"></div>
-            <button onclick="pdfViewer.setZoom('out')"><i class="material-icons-outlined">remove</i></button>
+            <button onclick="setZoom('out')"><i class="material-icons-outlined">remove</i></button>
             <div class="dropdown">
                 <div class="dropdown-value" onclick="this.parentNode.classList.toggle('show');">
-                    <span class="zoomval">100%</span>
+                    <span id="zoomval">100%</span>
                     <i class="material-icons-outlined">
                         keyboard_arrow_down
                     </i>                    
                 </div>
                 <div class="dropdown-content" onclick="this.parentNode.classList.toggle('show');">
-                    <a href="#" onclick='pdfViewer.setZoom("width"); return false;'>Adjust width</a>
-                    <a href="#" onclick='pdfViewer.setZoom("height"); return false;'>Adjust height</a>
-                    <a href="#" onclick='pdfViewer.setZoom("fit"); return false;'>Fit page</a>
-                    <a href="#" onclick='pdfViewer.setZoom(0.5); return false;'>50%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(0.75); return false;'>75%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(1); return false;'>100%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(1.25); return false;'>125%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(1.5); return false;'>150%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(2); return false;'>200%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(3); return false;'>300%</a>
-                    <a href="#" onclick='pdfViewer.setZoom(4); return false;'>400%</a>
+                    <a href="#" onclick='setZoom("width"); return false;'>Adjust width</a>
+                    <a href="#" onclick='setZoom("height"); return false;'>Adjust height</a>
+                    <a href="#" onclick='setZoom("fit"); return false;'>Fit page</a>
+                    <a href="#" onclick='setZoom(0.5); return false;'>50%</a>
+                    <a href="#" onclick='setZoom(0.75); return false;'>75%</a>
+                    <a href="#" onclick='setZoom(1); return false;'>100%</a>
+                    <a href="#" onclick='setZoom(1.25); return false;'>125%</a>
+                    <a href="#" onclick='setZoom(1.5); return false;'>150%</a>
+                    <a href="#" onclick='setZoom(2); return false;'>200%</a>
+                    <a href="#" onclick='setZoom(3); return false;'>300%</a>
+                    <a href="#" onclick='setZoom(4); return false;'>400%</a>
                 </div>                    
             </div>
             <button id="hideselected" onclick="hideselected();"><i class="material-icons-outlined">block</i></button>
             <div class="divider"></div>
+            <a class="button" onclick="printDoc(); return false;"><i class="material-icons-outlined">print</i></a>
             <label class="button" for="opendoc"><i class="material-icons-outlined">file_open</i></label>
             <input id="opendoc" type="file" accept="application/pdf">
             <a id="filedownload" class="button"><i class="material-icons-outlined">file_download</i></a>
@@ -122,7 +125,7 @@
                     <a href="#" onclick='pdfViewer.rotate(-90, true); pdfThumbnails.rotate(-90, true).then(() => pdfThumbnails.setZoom("fit"));'><i class="material-icons-outlined">rotate_90_degrees_ccw</i>Rotate countrary clockwise</a>
                     <a href="#" onclick='pdfViewer.rotate(90, true); pdfThumbnails.rotate(90, true).then(() => pdfThumbnails.setZoom("fit"));'><i class="material-icons-outlined">rotate_90_degrees_cw</i>Rotate clockwise</a>
                     <div class="h-sep"></div>
-                    <a href="#" onclick='document.querySelector(".pdfjs-viewer").classList.remove("horizontal-scroll"); pdfViewer.refreshAll();'><i class="material-icons-outlined">more_vert</i>Vertical scroll</a>
+                    <a href="#" onclick='document.querySelector(".maindoc").classList.remove("horizontal-scroll"); pdfViewer.refreshAll();'><i class="material-icons-outlined">more_vert</i>Vertical scroll</a>
                     <a href="#" onclick='setHorizontal()'><i class="material-icons-outlined">more_horiz</i>Horizontal scroll</a>
                 </div>                    
             </div>                
@@ -139,124 +142,149 @@
     </div>
 </body>
 <script>
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-const PDFFILE = urlParams.get('doc')??"test.pdf";
+function preparePage() {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const PDFFILE = urlParams.get('doc')??"test.pdf";
 
-function dataURItoBinArray(data) {
-    // taken from: https://stackoverflow.com/a/11954337/14699733
-    var binary = atob(data);
-    var array = [];
-    for(var i = 0; i < binary.length; i++) {
-        array.push(binary.charCodeAt(i));
+    function dataURItoBinArray(data) {
+        // taken from: https://stackoverflow.com/a/11954337/14699733
+        var binary = atob(data);
+        var array = [];
+        for(var i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+        }
+        return new Uint8Array(array);
     }
-    return new Uint8Array(array);
-}
-/** Function to load a PDF file using the input=file API */
-document.querySelector("#opendoc").addEventListener("change", function(e) {
-    let file = e.target;
-    let reader = new FileReader();
-    reader.onload = async function() {
-        await pdfViewer.loadDocument({data: dataURItoBinArray(reader.result.replace(/^data:.*;base64,/,""))});
-        await pdfThumbnails.loadDocument({data: dataURItoBinArray(reader.result.replace(/^data:.*;base64,/,""))}).then(() => pdfThumbnails.setZoom("fit"));
+    /** Function to load a PDF file using the input=file API */
+    document.querySelector("#opendoc").addEventListener("change", function(e) {
+        let file = e.target;
+        let reader = new FileReader();
+        reader.onload = async function() {
+            await pdfViewer.loadDocument({data: dataURItoBinArray(reader.result.replace(/^data:.*;base64,/,""))});
+            await pdfThumbnails.loadDocument({data: dataURItoBinArray(reader.result.replace(/^data:.*;base64,/,""))}).then(() => pdfThumbnails.setZoom("fit"));
+        }
+        if (file.files.length > 0) {
+            reader.readAsDataURL(file.files[0]);
+            document.querySelector('#filedownload').download = document.querySelector('#opendoc').files[0].name;
+        }
+    });
+    /** Sets the document in horizontal scroll by changing the class for the pages container and refreshing the document 
+     *    so that the pages may be displayed in horizontal scroll if they were not visible before */
+    function setHorizontal() {
+        document.querySelector(".maindoc").classList.add("horizontal-scroll"); 
+        pdfViewer.refreshAll();    
     }
-    if (file.files.length > 0) {
-        reader.readAsDataURL(file.files[0]);
-        document.querySelector('#filedownload').download = document.querySelector('#opendoc').files[0].name;
+    /** Toggles the visibility of the thumbnails */
+    function togglethumbs(el) {
+        if (el.classList.contains('pushed')) {
+            el.classList.remove('pushed');
+            document.querySelector('.thumbnails').classList.add('hide');
+        } else {
+            el.classList.add('pushed');
+            document.querySelector('.thumbnails').classList.remove('hide');
+        }
     }
-});
-/** Sets the document in horizontal scroll by changing the class for the pages container and refreshing the document 
- *    so that the pages may be displayed in horizontal scroll if they were not visible before */
-function setHorizontal() {
-    document.querySelector(".maindoc").classList.add("horizontal-scroll"); 
-    pdfViewer.refreshAll();    
-}
-/** Toggles the visibility of the thumbnails */
-function togglethumbs(el) {
-    if (el.classList.contains('pushed')) {
-        el.classList.remove('pushed');
-        document.querySelector('.thumbnails').classList.add('hide');
-    } else {
-        el.classList.add('pushed');
-        document.querySelector('.thumbnails').classList.remove('hide');
+    /** Toggles hiding the current page */
+    function hideselected() {
+        let $selected = pdfThumbnails.$container.find('.selected');
+        let i = $selected.data('page');
+        $selected.toggleClass('hidden');
+        pdfViewer.$container.find('.pdfpage[data-page="' + i + '"]').toggleClass('hidden');
+        pdfViewer.scrollToPage(i);
     }
-}
-/** Toggles hiding the current page */
-function hideselected() {
-    let $selected = pdfThumbnails.$container.find('.selected');
-    let i = $selected.data('page');
-    $selected.toggleClass('hidden');
-    pdfViewer.$container.find('.pdfpage[data-page="' + i + '"]').toggleClass('hidden');
-    pdfViewer.scrollToPage(i);
-}
-/** Now create the PDFjsViewer object in the DIV */
-let pdfViewer = new PDFjsViewer($('.maindoc'), {
-    zoomValues: [ 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 ],
+    /** Now create the PDFjsViewer object in the DIV */
+    let pdfViewer = new PDFjsViewer($('.maindoc'), {
+        zoomValues: [ 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 ],
+
+        /** Update the zoom value in the toolbar */
+        onZoomChange: function(zoom) {
+            zoom = parseInt(zoom * 10000) / 100;
+            $('.zoomval').text(zoom + '%');
+        },
 
-    /** Update the zoom value in the toolbar */
-    onZoomChange: function(zoom) {
-        zoom = parseInt(zoom * 10000) / 100;
-        $('.zoomval').text(zoom + '%');
-    },
+        /** Update the active page */
+        onActivePageChanged: function(page) {
+            let pageno = $(page).data('page');
+            let pagetotal = this.getPageCount();
 
-    /** Update the active page */
-    onActivePageChanged: function(page) {
-        let pageno = $(page).data('page');
-        let pagetotal = this.getPageCount();
+            if (! $(page).hasClass('hidden')) {
+                pdfThumbnails.setActivePage(pageno);
+                $('#pageno').val(pageno);
+                $('#pageno').attr('max', pagetotal);
+                $('#pagecount').text('de ' + pagetotal);
+            }
+        },
 
-        if (! $(page).hasClass('hidden')) {
-            pdfThumbnails.setActivePage(pageno);
-            $('#pageno').val(pageno);
-            $('#pageno').attr('max', pagetotal);
-            $('#pagecount').text('de ' + pagetotal);
+        /** zoom to fit when the document is loaded and create the object if wanted to be downloaded */
+        onDocumentReady: function () {
+            setZoom('fit');
+            pdfViewer.pdf.getData().then(function(data) {
+                document.querySelector('#filedownload').href = URL.createObjectURL(new Blob([data], {type: 'application/pdf'}));
+                document.querySelector('#filedownload').target = '_blank';
+            });
         }
-    },
+    });
 
-    /** zoom to fit when the document is loaded and create the object if wanted to be downloaded */
-    onDocumentReady: function () {
-        pdfViewer.setZoom('fit');
-        pdfViewer.pdf.getData().then(function(data) {
-            document.querySelector('#filedownload').href = URL.createObjectURL(new Blob([data], {type: 'application/pdf'}));
-            document.querySelector('#filedownload').target = '_blank';
-        });
-    }
-});
+    /** Load the initial PDF file */
+    pdfViewer.loadDocument(PDFFILE).then(function() {
+        document.querySelector('#filedownload').download = PDFFILE;
+    });
 
-/** Load the initial PDF file */
-pdfViewer.loadDocument(PDFFILE).then(function() {
-    document.querySelector('#filedownload').download = PDFFILE;
-});
+    /** Create the thumbnails */
+    let pdfThumbnails = new PDFjsViewer($('.thumbnails'), {
+        zoomFillArea: 0.7,
+        onNewPage: function(page, i) {
+            $('<div class="numbering">').text(i).appendTo(page);
+            page.on('click', function() {
+                pdfThumbnails.setActivePage(page.data('page'));                
+                if (!pdfViewer.isPageVisible(page.data('page'))) {
+                    pdfViewer.scrollToPage(page.data('page'));
+                } 
+            })
+        },
+        onDocumentReady: function() {
+            this.setZoom('fit');
+        }
+    });
 
-/** Create the thumbnails */
-let pdfThumbnails = new PDFjsViewer($('.thumbnails'), {
-    zoomFillArea: 0.7,
-    onNewPage: function(page, i) {
-        $('<div class="numbering">').text(i).appendTo(page);
-        page.on('click', function() {
-            pdfThumbnails.setActivePage(page.data('page'));                
-            if (!pdfViewer.isPageVisible(page.data('page'))) {
-                pdfViewer.scrollToPage(page.data('page'));
-            } 
-        })
-    },
-    onDocumentReady: function() {
-        this.setZoom('fit');
-    }
-});
+    pdfThumbnails.setActivePage = function(pageno) {
+        this.$container.find('.pdfpage').removeClass('selected');
+
+        let $npage = this.$container.find('.pdfpage[data-page="' + pageno + '"]').addClass('selected');
+        $('#hideselected').removeClass('pushed');
+        if ($npage.hasClass('hidden'))
+            $('#hideselected').addClass('pushed');
 
-pdfThumbnails.setActivePage = function(pageno) {
-    this.$container.find('.pdfpage').removeClass('selected');
+        if (!this.isPageVisible(pageno)) {
+            this.scrollToPage(pageno);
+        }
+    }.bind(pdfThumbnails);
+
+    pdfThumbnails.loadDocument(PDFFILE);
 
-    let $npage = this.$container.find('.pdfpage[data-page="' + pageno + '"]').addClass('selected');
-    $('#hideselected').removeClass('pushed');
-    if ($npage.hasClass('hidden'))
-        $('#hideselected').addClass('pushed');
+    function setZoom(zoom) {
+        pdfViewer.setZoom(zoom);
+        document.querySelector('#zoomval').innerText = parseInt(pdfViewer.getZoom() * 10000)/100 + '%';
+    }
 
-    if (!this.isPageVisible(pageno)) {
-        this.scrollToPage(pageno);
+    // Expose the pdfViewer object to the window so that it can be used from outside the module
+    window.pdfViewer = pdfViewer;
+    window.pdfThumbnails = pdfThumbnails;
+    window.setZoom = setZoom;
+    window.togglethumbs = togglethumbs;
+    window.setHorizontal = setHorizontal;
+    window.hideselected = hideselected;
+    window.printDoc = function() {
+        pdfViewer.pdf.getData().then(function(data) {
+            let b64Pdf=btoa(String.fromCharCode.apply(null, data));
+            printJS({printable: b64Pdf, type: 'pdf', base64: true});
+        });
     }
-}.bind(pdfThumbnails);
+}
 
-pdfThumbnails.loadDocument(PDFFILE);
+// As modules are loaded after the DOM is ready, we need to wait for the DOM to be ready to create the PDFjsViewer object
+document.addEventListener("DOMContentLoaded", preparePage);
 </script>
+<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
 </html>
diff --git a/examples/mostsimple.html b/examples/mostsimple.html
index 4aa308f..a5db3e1 100644
--- a/examples/mostsimple.html
+++ b/examples/mostsimple.html
@@ -4,18 +4,20 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs" type="module"></script>
         <script src="../js/pdfjs-viewer.js"></script>
         <link rel="stylesheet" href="../css/pdfjs-viewer.css">
-        <script>
-        var pdfjsLib = window['pdfjs-dist/build/pdf'];
-        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
-        </script>
     </head>
     <body class="pdfjs-viewer">
     </body>
     <script>
-        var pdfViewer = new PDFjsViewer($('body'));
-        pdfViewer.loadDocument('test.pdf');
+        document.addEventListener('DOMContentLoaded', function() {
+            /// As the PDF library is a module, we need to wait for the DOM to be ready so that the module has been loaded
+            var { pdfjsLib } = globalThis;
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';
+
+            var pdfViewer = new PDFjsViewer($('body'));
+            pdfViewer.loadDocument('test.pdf');
+        });
     </script>
 </html>
\ No newline at end of file
diff --git a/examples/simpledoc.html b/examples/simpledoc.html
index 763566b..b60febd 100644
--- a/examples/simpledoc.html
+++ b/examples/simpledoc.html
@@ -5,14 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs" type="module"></script>
     <script src="../js/pdfjs-viewer.js"></script>
     <link rel="stylesheet" href="../css/pdfjs-viewer.css">
-    <script>
-    // Let's initialize the PDFjs library
-    var pdfjsLib = window['pdfjs-dist/build/pdf'];
-    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
-    </script>
     <style>
         .h-50 {
             height: 50% !important;
@@ -29,10 +24,22 @@ <h1>Example for PDFjs-viewer</h1>
         </div>
     </div>
 </body>
-<script>
+<script type="module">
+    // We have set the type to module so that we make sure that the script is executed after the other modules have been loaded
+    var { pdfjsLib } = globalThis;
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';
+
     let pdfViewer = new PDFjsViewer($('.pdfjs-viewer'));
     pdfViewer.loadDocument("test.pdf").then(function() {
         pdfViewer.setZoom("fit");
     });
+    window.pdfViewer = pdfViewer;
+    window.printDoc = function() {
+        pdfViewer.pdf.getData().then(function(data) {
+            let b64Pdf=btoa(String.fromCharCode.apply(null, data));
+            printJS({printable: b64Pdf, type: 'pdf', base64: true});
+       });
+    }
 </script>
+<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
 </html>
\ No newline at end of file
diff --git a/examples/simpledoctoolbar.html b/examples/simpledoctoolbar.html
index aade14e..2186868 100644
--- a/examples/simpledoctoolbar.html
+++ b/examples/simpledoctoolbar.html
@@ -7,13 +7,12 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs" type="module"></script>
     <script src="../js/pdfjs-viewer.js"></script>
     <link rel="stylesheet" href="../css/pdfjs-viewer.css">
-    <script>
-    // Let's initialize the PDFjs library
-    var pdfjsLib = window['pdfjs-dist/build/pdf'];
-    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
+    <script type="module">
+        var { pdfjsLib } = globalThis;
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';
     </script>
     <style>
         .pdfjs-toolbar, .pdfjs-toolbar i {
@@ -53,12 +52,12 @@ <h1>Example for PDFjs-viewer</h1>
                     <button class="btn btn-secondary btn-sm btn-last" onclick="pdfViewer.last()"><i class="material-icons-outlined">skip_next</i></button>
                 </div>
                 <div class="col-12 col-lg-6 my-1">
-                    <button class="btn btn-secondary btn-sm" onclick="pdfViewer.setZoom('out')"><i class="material-icons-outlined">zoom_out</i></button>
-                    <span class="zoomval">100%</span>
-                    <button class="btn btn-secondary btn-sm" onclick="pdfViewer.setZoom('in')"><i class="material-icons-outlined">zoom_in</i></button>
-                    <button class="btn btn-secondary btn-sm ms-3" onclick="pdfViewer.setZoom('width')"><i class="material-icons-outlined">swap_horiz</i></button>
-                    <button class="btn btn-secondary btn-sm" onclick="pdfViewer.setZoom('height')"><i class="material-icons-outlined">swap_vert</i></button>
-                    <button class="btn btn-secondary btn-sm" onclick="pdfViewer.setZoom('fit')"><i class="material-icons-outlined">fit_screen</i></button>
+                    <button class="btn btn-secondary btn-sm" onclick="setZoom('out')"><i class="material-icons-outlined">zoom_out</i></button>
+                    <span id="zoomval">100%</span>
+                    <button class="btn btn-secondary btn-sm" onclick="setZoom('in')"><i class="material-icons-outlined">zoom_in</i></button>
+                    <button class="btn btn-secondary btn-sm ms-3" onclick="setZoom('width')"><i class="material-icons-outlined">swap_horiz</i></button>
+                    <button class="btn btn-secondary btn-sm" onclick="setZoom('height')"><i class="material-icons-outlined">swap_vert</i></button>
+                    <button class="btn btn-secondary btn-sm" onclick="setZoom('fit')"><i class="material-icons-outlined">fit_screen</i></button>
                 </div>
             </div>
             <div class="pdfjs-viewer h-100" pdf-document="test.pdf" initial-zoom="fit" on-document-ready="pdfViewer = this.pdfViewer;">
@@ -68,5 +67,9 @@ <h1>Example for PDFjs-viewer</h1>
 </body>
 <script>
     var pdfViewer;
+    function setZoom(zoom) {
+        pdfViewer.setZoom(zoom);
+        document.getElementById('zoomval').innerText = parseInt(pdfViewer.getZoom() * 100) + '%';
+    }
 </script>
 </html>
\ No newline at end of file
diff --git a/examples/simpler.html b/examples/simpler.html
index c33e641..cb4fddd 100644
--- a/examples/simpler.html
+++ b/examples/simpler.html
@@ -4,13 +4,13 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs" type="module"></script>
         <link rel="stylesheet" href="../css/pdfjs-viewer.css">
-        <script>
-        var pdfjsLib = window['pdfjs-dist/build/pdf'];
-        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
+        <script type="module">
+        var { pdfjsLib } = globalThis;
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';
         </script>
-    </head>
+        </head>
     <body class="pdfjs-viewer" pdf-document="test.pdf" initial-zoom="fit">
     </body>
     <script src="../js/pdfjs-viewer.js"></script>