如何知道PDF.JS是否已完成渲染？

Question

我正在使用PDF.JS将pdf页面渲染到不同的画布元素中.我的要求是捕获画布的输出并将其显示为图像.是否有一些事件要知道画布中的pdf页面的渲染是否已经完成.因为当我尝试捕获画布的输出时,它是空白的.但pdf页面正确呈现.看起来我的捕获事件是在pdf.js完成渲染过程之前调用的.

这是我的代码:

page.render(renderContext);
var myImage = new Image();
myImage.src = document.getElementById('my-canvas-id').toDataURL();
$('body').append(myImage);

如果我在FireFox的控制台中执行相同的代码,这可以正常工作.所以这段代码没什么问题.

只是为了让你们知道我已经尝试过document.ready和window.load事件.

Answer 1

我也在努力解决这个问题..我使用的解决方案是:

//Step 1: store a refer to the renderer
var pageRendering = page.render(renderContext);
//Step : hook into the pdf render complete event
var completeCallback = pageRendering.internalRenderTask.callback;
pageRendering.internalRenderTask.callback = function (error) {
  //Step 2: what you want to do before calling the complete method                  
  completeCallback.call(this, error);
  //Step 3: do some more stuff
};

Answer 2

<script type="text/javascript">
  document.addEventListener("pagesloaded", function(e) {
   //do sth..
  });
</script>

为我工作

Answer 3

在撰写本文时,这确实有效.我不确定它是否仍然存在.

PDFJS利用Promises.最简单的方法是:

page.render(renderContext).promise.then(function(){
  document.body.appendChild(canvas);
});

Answer 4

使用该textlayerrendered事件对我有用：

document.addEventListener('textlayerrendered', function (event) {
  // was this the last page?
  if (event.detail.pageNumber === PDFViewerApplication.page) {
    console.log('Finished rendering!');
  }
}, true);