pdf.js 的 Javascript Pdf 导航答案

【问题标题】：Javascript Pdf navigation for pdf.jspdf.js 的 Javascript Pdf 导航
【发布时间】：2016-09-20 18:58:08
【问题描述】：

是否可以使用 pdf.js 在 html 页面中呈现 PDF 并管理其导航？对于导航，我的意思是缩放和平移。我的目标是添加一些带有平移（上、下、左、右）的按钮以进行缩放（放大、缩小、默认缩放），如果可能的话，自动平移文档，使其在点击位置居中。

【问题讨论】：

如果您知道如何渲染页面，则只需使用不同的比例因子（例如 +/- 10%）再次渲染即可实现放大和缩小。

标签： javascript html navigation pdf.js

【解决方案1】：

pdf.js 的重点是在 HTML5 中呈现 .pdf 文档。所以你说的应该是可以实现的。该项目是 Github 上的quite well documented，应该是一个很好的起点。就导航和其他用于缩放和平移的切换按钮而言，它们已明确实现here 和here。

因此，您可以先查看这些演示的源代码，然后查看文档以满足您的需求。希望这能让你朝着正确的方向开始。我从其中一个演示中发布了一些相关的代码 sn-p：

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

 /**
  * Get page info from document, resize canvas accordingly, and render page.
  * @param num Page number.
  */
 function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });

    // Update page counters
    document.getElementById('page_num').textContent = pageNum;
 }

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

/**
 * Displays previous page.
 */
function onPrevPage() {
    if (pageNum <= 1) {
         return;
    }
    pageNum--;
    queueRenderPage(pageNum);
}

document.getElementById('prev').addEventListener('click', onPrevPage);

...

/**
 * Asynchronously downloads PDF.
 */
PDFJS.getDocument(url).then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
}

【讨论】：