9

我使用 pdf.js 创建了一个简单的 pdf 查看器，它有 2 页并排，下一个、上一个按钮和一些其他功能。我使用了 pdf.js 存储库中提供的 helloworld 示例，因为 viewer.js 文件对于像我这样的菜鸟来说太复杂了。但是，当我多次单击上一个/下一个按钮时，pdf.js 会呈现所有页面而不是预期的最后一页。它会造成混乱。pdf.js 的以下示例有同样的问题。 http://jsbin.com/pdfjs-prevnext-v2/1/edit（链接似乎只在 Firefox 中有效。）

我想知道使 pdf.js 仅呈现下一个/上一个按钮到达的最后一页的方法是什么。pdf.js api 对我帮助不大。希望我能在这里得到一些指导。提前致谢。

4

3 回答 3

7

我有同样的问题并且更容易解决。该render()方法返回一个renderTask如下所示的对象：

renderTask: {
    internarRenedrTask: {...},
    promise: {...}
}

可以停止渲染的renderTask.internalRenderTaskhas方法的原型。cancel()所以只要记住renderTask.internalRenderTask对象并cancel()在需要时调用：

render: function() {
    if (this.renderTask) {
        this.renderTask.cancel();
    }

    // some code here

    this.renderTask = page.render(...).internalRenderTask;
}
于 2014-08-04T06:11:49.183 回答
4

如果我能很好地理解你的问题，我可能会有一个解决方案。当我在上一个或下一个按钮上单击得太快时，画布没有时间刷新，并且绘制了两个（或更多）页面，它是不可读的。

为了解决这个问题，我使用以下代码：

var stop = false;
function goPrevious() {
    if (pageNum > 1 && !stop)
    {
        stop = true;
        pageNum--;
        renderPage(pageNum);
    }
}

function goNext() {
    if (pageNum < pdfDoc.numPages && !stop)
    {
        stop = true;
        pageNum++;
        renderPage(pageNum);
    }
}

我还修改了 pdf.js 文件中的渲染函数：

 render: function PDFPageProxy_render(params) {
      this.renderInProgress = true;

      var promise = new Promise();
      var stats = this.stats;
      stats.time('Overall');
      // If there is no displayReadyPromise yet, then the operatorList was never
      // requested before. Make the request and create the promise.
      if (!this.displayReadyPromise) {
        this.displayReadyPromise = new Promise();
        this.destroyed = false;

        this.stats.time('Page Request');
        this.transport.messageHandler.send('RenderPageRequest', {
          pageIndex: this.pageNumber - 1
        });
      }

      var self = this;
      function complete(error) {
        self.renderInProgress = false;
        stop = false;
        if (self.destroyed || self.cleanupAfterRender) {
          delete self.displayReadyPromise;
          delete self.operatorList;
          self.objs.clear();
        }

        if (error)
          promise.reject(error);
        else
          promise.resolve();
      }
      var continueCallback = params.continueCallback;
//etc.

（在我的 pdf.js 文件中，这是在第 2563 行和第 2596 行之间）。

结果，在上一页完全绘制之前不会绘制新页面，即使您非常快速地单击上一个/下一个按钮！

另一种解决方案可能是取消之前的绘图：

function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        // canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        // draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        // update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

我希望它会帮助你，对不起我的英语;）祝你有美好的一天

于 2013-08-06T13:37:56.217 回答
0

关于第二种解决方案，您必须timestamp在函数外部创建变量，例如在文件开头。如果timestamp在函数内部声明，变量只在函数执行过程中存在，不能工作。您可以执行以下操作：

var timestamp;
function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        // canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        // draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        // update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

告诉我现在还好吗

于 2013-08-07T08:05:55.503 回答