Zoom pdf.js on mobile view browser

Question

I created a pdf display on the web with pdf.js and it worked normally, the pdf appeared and I could click next and previous, but when the mobile pdf display became small, I couldn't change the rotation to the side and zoom, but I couldn't, what was wrong with my script. I want when the mobile position the size can be zoomed in or made clearer.

HTML

 <div class="slides-player__body bg-grey-light" scroller="">
        <div id="pdf-contents">
            <canvas id="pdf-canvas" width="2000" class="start-image"></canvas>
        <div id="page-loader" style="padding-top:20px;"><p>Loading page ... <i class="fa fa- fa-spinner fa-spin"></i></p></div>
        </div>
    </div>

Jquery

  var __PDF_DOC,
    __CURRENT_PAGE,
    __TOTAL_PAGES,
    __PAGE_RENDERING_IN_PROGRESS = 0,
    __CANVAS = $('#pdf-canvas').get(0),
    __CANVAS_CTX = __CANVAS.getContext('2d');
  var location_pdf = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";  
  showPDF(location_pdf);

  function showPDF(pdf_url) {
    $("#pdf-loader").show();

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
      __PDF_DOC = pdf_doc;
      __TOTAL_PAGES = __PDF_DOC.numPages;
      
      // Hide the pdf loader and show pdf container in HTML
      $("#pdf-loader").hide();
      $("#pdf-contents").show();
      $("#pdf-total-pages").text(__TOTAL_PAGES);

      // Show the first page
      var pg = document.getElementById("current_slide").value ;
      showPage(parseInt(pg));
    }).catch(function(error) {
      // If error re-show the upload button
      $("#pdf-loader").hide();
      $("#upload-button").show();
      
      alert(error.message);
    });
  }
  
    function showPage(page_no) {
    __PAGE_RENDERING_IN_PROGRESS = 1;
    __CURRENT_PAGE = page_no;

    // Disable Prev & Next buttons while page is being loaded
    $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');

    // While page is being rendered hide the canvas and show a loading message
    $("#pdf-canvas").hide();
    $("#page-loader").show();

    // Update current page in HTML
    $("#pdf-current-page").text(page_no);
    
    // Fetch the page
    __PDF_DOC.getPage(page_no).then(function(page) {
      // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
      var scale_required = __CANVAS.width / page.getViewport(1.0).width;

      // Get viewport of the page at required scale
      var viewport = page.getViewport(scale_required);

      // Set canvas height
      __CANVAS.height = viewport.height;

      var renderContext = {
        canvasContext: __CANVAS_CTX,
        viewport: viewport
      };
      
      // Render the page contents in the canvas
      page.render(renderContext).then(function() {
        __PAGE_RENDERING_IN_PROGRESS = 0;

        // Re-enable Prev & Next buttons
        $("#pdf-next, #pdf-prev").removeAttr('disabled');

        // Show the canvas and hide the page loader
        $("#pdf-canvas").show();
        $("#page-loader").hide();
      });
    });
  }

Answer 1

You can add extra handlers for touch events and control for rotation

Updated Code

var __PDF_DOC,
    __CURRENT_PAGE,
    __TOTAL_PAGES,
    __PAGE_RENDERING_IN_PROGRESS = 0,
    __CANVAS = $('#pdf-canvas').get(0),
    __CANVAS_CTX = __CANVAS.getContext('2d');
var location_pdf = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
var __ZOOM_LEVEL = 1.0;
var __ROTATION_ANGLE = 0;

showPDF(location_pdf);

function showPDF(pdf_url) {
    $("#pdf-loader").show();

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
        __PDF_DOC = pdf_doc;
        __TOTAL_PAGES = __PDF_DOC.numPages;
        
        $("#pdf-loader").hide();
        $("#pdf-contents").show();
        $("#pdf-total-pages").text(__TOTAL_PAGES);

        var pg = document.getElementById("current_slide").value;
        showPage(parseInt(pg));
    }).catch(function(error) {
        $("#pdf-loader").hide();
        $("#upload-button").show();
        alert(error.message);
    });
}

function showPage(page_no) {
    __PAGE_RENDERING_IN_PROGRESS = 1;
    __CURRENT_PAGE = page_no;

    $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');
    $("#pdf-canvas").hide();
    $("#page-loader").show();
    $("#pdf-current-page").text(page_no);
    
    __PDF_DOC.getPage(page_no).then(function(page) {
        var viewport = page.getViewport({ scale: __ZOOM_LEVEL, rotation: __ROTATION_ANGLE });
        __CANVAS.height = viewport.height;
        __CANVAS.width = viewport.width;

        var renderContext = {
            canvasContext: __CANVAS_CTX,
            viewport: viewport
        };
        
        page.render(renderContext).then(function() {
            __PAGE_RENDERING_IN_PROGRESS = 0;
            $("#pdf-next, #pdf-prev").removeAttr('disabled');
            $("#pdf-canvas").show();
            $("#page-loader").hide();
        });
    });
}

$("#zoom-in").on("click", function() {
    __ZOOM_LEVEL += 0.1;
    showPage(__CURRENT_PAGE);
});

$("#zoom-out").on("click", function() {
    __ZOOM_LEVEL = Math.max(0.1, __ZOOM_LEVEL - 0.1);
    showPage(__CURRENT_PAGE);
});

$("#rotate-left").on("click", function() {
    __ROTATION_ANGLE = (__ROTATION_ANGLE - 90) % 360;
    showPage(__CURRENT_PAGE);
});

$("#rotate-right").on("click", function() {
    __ROTATION_ANGLE = (__ROTATION_ANGLE + 90) % 360;
    showPage(__CURRENT_PAGE);
});

HTML

<div class="slides-player__body bg-grey-light" scroller="">
    <div id="pdf-contents">
        <canvas id="pdf-canvas" width="2000" class="start-image"></canvas>
        <div id="page-loader" style="padding-top:20px;">
            <p>Loading page ... <i class="fa fa- fa-spinner fa-spin"></i></p>
        </div>
    </div>
    <div class="controls">
        <button id="zoom-in">Zoom In</button>
        <button id="zoom-out">Zoom Out</button>
        <button id="rotate-left">Rotate Left</button>
        <button id="rotate-right">Rotate Right</button>
    </div>
</div>