PDF.js 使用API说明：文件打开、页码跳转、手势放大缩小

PDF访问地址：

http://127.0.0.1:5500/web/viewer.html

修改PDF文件地址直接在后面加?file=

页码跳转在后面加#page=而不是&page=

完成例子：

http://127.0.0.1:5500/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf#page=1

【手势放大缩小】使用版本PDF.js:2.0.943

在body底部加入如下代码

<script lang="javascript">
    let agent = navigator.userAgent.toLowerCase();
    //if (!agent.includes("iphone")) {
      let pinchZoomEnabled = false;
      function enablePinchZoom(pdfViewer) {
        let startX = 0,
          startY = 0;
        let initialPinchDistance = 0;
        let pinchScale = 1;
        const viewer = document.getElementById("viewer");
        const container = document.getElementById("viewerContainer");
        const reset = () => {
          startX = startY = initialPinchDistance = 0;
          pinchScale = 1;
        };
        // Prevent native iOS page zoom
        //document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
        document.addEventListener("touchstart", (e) => {
          if (e.touches.length > 1) {
            startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
            startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
            initialPinchDistance = Math.hypot(
              e.touches[1].pageX - e.touches[0].pageX,
              e.touches[1].pageY - e.touches[0].pageY
            );
          } else {
            initialPinchDistance = 0;
          }
        });
        document.addEventListener(
          "touchmove",
          (e) => {
            if (initialPinchDistance <= 0 || e.touches.length < 2) {
              return;
            }
            if (e.scale !== 1) {
              e.preventDefault();
            }
            const pinchDistance = Math.hypot(
              e.touches[1].pageX - e.touches[0].pageX,
              e.touches[1].pageY - e.touches[0].pageY
            );
            const originX = startX + container.scrollLeft;
            const originY = startY + container.scrollTop;
            pinchScale = pinchDistance / initialPinchDistance;
            viewer.style.transform = `scale(${pinchScale})`;
            viewer.style.transformOrigin = `${originX}px ${originY}px`;
          }, {
          passive: false
        }
        );
        document.addEventListener("touchend", (e) => {
          if (initialPinchDistance <= 0) {
            return;
          }
          viewer.style.transform = `none`;
          viewer.style.transformOrigin = `unset`;
          PDFViewerApplication.pdfViewer.currentScale *= pinchScale;
          const rect = container.getBoundingClientRect();
          const dx = startX - rect.left;
          const dy = startY - rect.top;
          container.scrollLeft += dx * (pinchScale - 1);
          container.scrollTop += dy * (pinchScale - 1);
          reset();
        });
      }
      document.addEventListener("DOMContentLoaded", () => {
        if (!pinchZoomEnabled) {
          pinchZoomEnabled = true;
          enablePinchZoom();
        }
      });
   

  </script>

引用作者代码：【PDF】pdfjs 在h5支持手势缩放 - 简书

记录一下，方便需要的道友，也有其它的可以在评论区回复哦

网上搜索都没有找到，搜索到了要开VIP才能看到。