停止pdf.js页面呈现

我使用pdf.js创建了一个简单的pdf查看器，它有两个页面，旁边有“下一步”、“上一步”按钮和一些其他功能。我使用了pdf.js repo提供的helloworld示例，因为viewer.js文件对于我这样的noob来说太复杂了。但是，当我多次单击“上一页/下一页”按钮时，pdf.js会呈现所有页面，而不是预期的最后一页。这会造成混乱。下面的pdf.js示例也有同样的问题。 （链接似乎仅在firefox中可用。）

---

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

如果我能很好地理解你的问题，我可能会有一个解决办法。 当我在“上一个”或“下一个”按钮上单击过快时，画布没有时间刷新，并且绘制了两个（或更多）页面，因此无法读取

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

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文件中，这在第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;
    });
}

我希望它能帮助你，对不起我的英语；）

---

祝您愉快

关于第二个解决方案，您必须在函数外部创建变量

timestamp

，例如在文件的开头。如果在函数中声明

timestamp

，则该变量仅在函数执行期间存在，无法工作。S您可以执行以下操作：

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;
    });
}

---

告诉我现在是否可以

我有同样的问题，解决起来更容易。

render（）

方法返回如下所示的

renderTask

对象：

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

renderTask.internalRenderTask的原型具有可以停止渲染的
cancel（）
方法。
所以只要记住
renderTask.internalRenderTask
对象，并在需要时调用
cancel（）
：

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

    // some code here

    this.renderTask = page.render(...).internalRenderTask;
}

我尝试过这个，它似乎比以前更好，但我仍然面临着这个问题，而点击太快。我不知道你是否也面临着它。我希望在画布完全加载之前禁用按钮，我尝试使用window.onload（），但由于画布加载时间较长，因此无法正常工作。pdf.js提供的完整viewer.html具有暂停功能，但无法理解他们是如何做到的。我只尝试了您的第一个解决方案，让我看看第二个解决方案。非常感谢你的努力，你的英语很棒。：）我试图取消之前的绘图，但是timestamp=pageTimestamp；未定义错误时间戳，因此我将代码更改为var timestamp=pageTimestamp；现在它永远不会进入if（timestamp！=pageTimestamp）条件，因为它们总是相等的。我做错了什么？再次表示感谢。：）关于第一个解决方案，即使我点击得非常快，也没问题，只画了一页。非常感谢，这很有魅力。你是救命恩人。（非常感谢。）2015:
page.render（…）
现在返回一个
renderTask
，该任务具有
cancel
方法。-->
this.renderTask=page.render（…）
@NinhPham您能提供更多关于如何访问此方法的信息吗？或者它在2019年仍然相关吗？@Jansindl3r，它仍然可用@Jansindl3r，查看，您将看到
页面。render（..）
以及如何访问
renderTask
。
render: function() {
    if (this.renderTask) {
        this.renderTask.cancel();
    }

    // some code here

    this.renderTask = page.render(...).internalRenderTask;
}