pdf.js adds gesture zoom function

        pdf.js is an open source js library for reading PDF files produced by mozilla.

        github repository: GitHub - mozilla/pdf.js: PDF Reader in JavaScript

        pdf.js enables PDF files to be opened and read in html pages, and the built-in preview page viewer.html contains rich functions. The preview effect is shown in the figure below:

        The page comes with a zoom-in and zoom-out function, which requires the user to click the corresponding " + " and " - " buttons to operate. But in the mobile phone page, a very common requirement of users is to zoom in and out through gestures, which is also a very reasonable user habit. However, pdf.js does not support gesture zooming by default, so you need to adjust its viewer.html to meet your needs.

        The method shared in this article does not need to modify the code of pdf.js itself, but only needs to add supplementary methods based on its own code.

        After reading, it can be found that the zoom-in and zoom-out functions of pdf.js call the methods PDFViewerApplication.zoomIn() and PDFViewerApplication.zoomOut() , and the code is located at line 812 of viewer.js :

        zoomIn(ticks) {
          if (this.pdfViewer.isInPresentationMode) {
            return;
          }
          let newScale = this.pdfViewer.currentScale;
          do {
            newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(2);
            newScale = Math.ceil(newScale * 10) / 10;
            newScale = Math.min(_ui_utils.MAX_SCALE, newScale);
          } while (--ticks > 0 && newScale < _ui_utils.MAX_SCALE);
          this.pdfViewer.currentScaleValue = newScale;
        },
        zoomOut(ticks) {
          if (this.pdfViewer.isInPresentationMode) {
            return;
          }
          let newScale = this.pdfViewer.currentScale;
          do {
            newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(2);
            newScale = Math.floor(newScale * 10) / 10;
            newScale = Math.max(_ui_utils.MIN_SCALE, newScale);
          } while (--ticks > 0 && newScale > _ui_utils.MIN_SCALE);
          this.pdfViewer.currentScaleValue = newScale;
        },

        It can be seen that the method contains some judgments of the current working mode. In order not to affect its own original functions, we can add two additional methods to separately handle gesture zooming in and out:

         //强制放大
         forceZoomIn() {
          let newScale = this.pdfViewer.currentScale;
          newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(2);
          newScale = Math.ceil(newScale * 10) / 10;
          newScale = Math.min(_ui_utils.MAX_SCALE, newScale);
          this.pdfViewer.currentScaleValue = newScale;
        },
         //强制缩小
         forceZoomOut() {
          let newScale = this.pdfViewer.currentScale;
          newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(2);
          newScale = Math.floor(newScale * 10) / 10;
          newScale = Math.max(_ui_utils.MIN_SCALE, newScale);
          this.pdfViewer.currentScaleValue = newScale;
        },

        Then add gesture event capture and call processing methods in viewer.html:

  <script type="text/javascript">

    var touchState = null;   //记录触屏手势触点信息的对象
    
    //绑定触屏事件
    function addPinchListener() {
      let element = document.getElementById("viewerContainer");
      element.addEventListener("touchstart", onTouchStart, false);
      element.addEventListener("touchmove", onTouchMove, false);
      element.addEventListener("touchend", onTouchEnd, false);
    }

    //记录触屏触点坐标 记录起始和结束点
    function onTouchStart(evt) {
      touchState = {
        //多点触屏的第一点
        startX: evt.touches[0].pageX,
        startY: evt.touches[0].pageY,
        endX: evt.touches[0].pageX,
        endY: evt.touches[0].pageY,

        //多点触屏的第二点  单点触屏时记录坐标为 -1 
        startX2: evt.touches[1] ? evt.touches[1].pageX : -1,
        startY2: evt.touches[1] ? evt.touches[1].pageY : -1,
        endX2: evt.touches[1] ? evt.touches[1].pageX : -1,
        endY2: evt.touches[1] ? evt.touches[1].pageY : -1
      };
    }

    //记录触屏触点坐标 触屏移动时更新结束点坐标
    function onTouchMove(evt) {
      if (touchState === null) {
        return;
      }
      touchState.endX = evt.touches[0].pageX;
      touchState.endY = evt.touches[0].pageY;
      touchState.endX2 = evt.touches[1] ? evt.touches[1].pageX : -1;
      touchState.endY2 = evt.touches[1] ? evt.touches[1].pageY : -1;
    }


    //触屏结束时 判断是否放大缩小
    function onTouchEnd(evt) {
      if (touchState === null) {
        return;
      }
      //计算两点间距离
      var getDistance = function (startX, startY, endX, endY) {
        return Math.hypot(endX - startX, endY - startY);
      };

      if (touchState.startX2 != -1 && touchState.endX2 != -1 && touchState.startY2 != -1 && touchState.endY2 != -1) {
        let distanceStart = getDistance(touchState.startX, touchState.startY, touchState.startX2, touchState.startY2);
        let distanceEnd = getDistance(touchState.endX, touchState.endY, touchState.endX2, touchState.endY2);
        //起始时两点距离和结束时两单距离进行比较，判断是方法还是缩小
        if (distanceStart < distanceEnd) {
          PDFViewerApplication.forceZoomIn();
        } else if (distanceStart > distanceEnd) {
          PDFViewerApplication.forceZoomOut();
        }
      }
    }
    
    addPinchListener();
  </script>

        After adding the above code, the mobile browser opens the corresponding page and you can use gestures to zoom in and out of the PDF file.

        Code package download: pdf.js with gesture zoom function-Web development document resources-CSDN download