我已经使用pdf.js创建了一个简单的pdf查看器,该查看器并排有2页,并具有next,previous按钮和其他一些功能。我使用了pdf.js存储库中的helloworld示例,因为对于像我这样的菜鸟来说,viewer.js文件太复杂了。但是,当我多次单击上一个/下一个按钮时,pdf.js呈现了所有页面,而不是预期的最后一页。它造成一团糟。 pdf.js的以下示例具有相同的问题。
http://jsbin.com/pdfjs-prevnext-v2/1/edit(链接似乎仅在firefox中有效。)
我想知道使pdf.js仅呈现下一个/上一个按钮到达的最后一页的方法是什么。 pdf.js api对我没有太大帮助。希望我能在这里得到一些指导。提前致谢。
最佳答案
如果我很了解您的问题,那么我可能会找到解决方案。
当我在上一个或下一个按钮上单击得太快时, Canvas 没有时间刷新,并且绘制了两个(或更多)页面,这是不可读的。
为了解决这个问题,我使用以下代码:
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函数:
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;
});
}
希望对您有所帮助,对不起我的英语;)
祝你今天过得愉快
关于pdf - 停止pdf.js页面呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18069448/