PDF预览

Yang大约 2 分钟
PDF预览插件
【GitHub】open in new window 【官方文档】open in new window
下载安装

使用方式

在官方文档中下载预建版本
将文件复制到项目文件夹
直接使用(预览全部)

直接访问：http://localhost/web/viewer.html?file=pdf_url
自定义显示方式

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF预览测试</title>
</head>
<body>
<!-- 控制按钮 -->
<div>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>

<script src="pdfjs/build/pdf.js"></script>
<script>
  // PDF 文件路径
  var url = './test.pdf';

  // 通过 <script> 标签加载，创建访问 PDF.js 导出的快捷方式
  var pdfjsLib = window['pdfjs-dist/build/pdf'];

  // 指定 workerSrc 属性
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js';

  var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1.5,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

  /**
   * 从文档中获取页面信息，相应地调整画布大小，并渲染页面
   * @param num 页码.
   */
  function renderPage(num) {
    pageRendering = true;
    // 使用 promise 获取页面
    pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport({
        scale: scale
      });
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 将 PDF 页面渲染到画布上下文中
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);

      // 等待渲染完成
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          // 渲染新页面
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });

    // 更新页面计数器
    document.getElementById('page_num').textContent = num;
  }

  /**
   * 如果另一个页面正在渲染，等待直到渲染完成
   * 否则，将立即执行渲染
   */
  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  /**
   * 显示上一页
   */
  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    pageNum--;
    queueRenderPage(pageNum);
  }
  document.getElementById('prev').addEventListener('click', onPrevPage);

  /**
   * 显示下一页
   */
  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    pageNum++;
    queueRenderPage(pageNum);
  }
  document.getElementById('next').addEventListener('click', onNextPage);

  /**
   * 异步下载PDF
   */
  pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // 初始化显示第一页
    renderPage(pageNum);
  });
</script>
</body>
</html>