pdfjs的滚动demo

最新推荐文章于 2024-04-23 10:05:17 发布

小楫轻舟丶

最新推荐文章于 2024-04-23 10:05:17 发布

阅读量1k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lioldamon/article/details/116130288

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      #pdf-viewer {
        width: 800px;
        height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
      }
    </style>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.8.335/pdf.js"></script>
  </head>
  <body>
    <div id="pdf-viewer"></div>
   
    <script id="script">
      var url = "a.pdf";

      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdn.bootcdn.net/ajax/libs/pdf.js/2.8.335/pdf.worker.js";

      var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null;

      function renderPage(num) {
        pageRendering = true;
        pdfDoc.getPage(num).then(function (page) {
          var canvasId = "pdf-viewer-" + num;
          $("#pdf-viewer").append($("<canvas/>", { id: canvasId }));
          var canvas = document.getElementById(canvasId);
          ctx = canvas.getContext("2d");
          let scale = 800 / 595;

          var viewport = page.getViewport({ scale: scale });

          canvas.height = viewport.height;
          canvas.width = viewport.width;

          var renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          var renderTask = page.render(renderContext);

          renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
        });
      }

      var loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        for (var i = 1; i <= pdfDoc.numPages; i++) {
          renderPage(i);
        }
      });
    </script>
  </body>
</html>

小楫轻舟丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pdfjs的滚动demo

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <style> #pdf-viewer { width: 800px; height: 600px; overflow-y: auto; overflow-x: hidden; } </style> &.
复制链接

扫一扫