blocks|key|2853708|text|我也在努力解决这个问题..我使用的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2853709|//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
};|code-block|syntax|javascript|2853710|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was also struggling with this problem.. the solution that i used is:

<pre><code>//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
};
</code></pre>

blocks|key|2853841|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2853842|<script+type="text/javascript">
++document.addEventListener("pagesloaded",+function(e)+{
+++//do+sth..
++});
</script>|code-block|syntax|javascript|2853843|2853844|对我很管用|2853845|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
 document.addEventListener("pagesloaded", function(e) {
 //do sth..
 });
&lt;/script&gt;</code></pre>
</div>
</div>


worked for me

blocks|key|3067151|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3067152|在写这篇文章的时候，这确实起作用了。我不确定它是否仍然有效。|blockquote|3067153|3067154|3067155|PDFJS使用Promises。要做的最简单的事情是：|offset|length|style|CODE|3067156|page.render(renderContext).promise.then(function(){
++document.body.appendChild(canvas);
});|code-block|syntax|javascript|3067157|entityMap^0|0|0|0|0|7|8|0|0^^$0|@$1|2|3|-4|4|5|6|S|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|T|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|V|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|W|7|@$H|X|I|Y|J|K]]|8|@]|9|$]]|$1|L|3|M|4|N|6|Z|7|@]|8|@]|9|$O|P]]|$1|Q|3|-4|4|5|6|10|7|@]|8|@]|9|$]]]|R|$]]

<blockquote>
 At the time of writing, this did work. I'm not sure if it still does.
</blockquote>

PDFJS makes use of <code>Promises</code>. The easiest thing to do is the following:

<pre><code>page.render(renderContext).promise.then(function(){
 document.body.appendChild(canvas);
});
</code></pre>

blocks|key|214005|text|使用textlayerrendered事件对我很有效：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|214006|document.addEventListener('textlayerrendered',+function+(event)+{
++//+was+this+the+last+page?
++if+(event.detail.pageNumber+===+PDFViewerApplication.page)+{
++++console.log('Finished+rendering!');
++}
},+true);|code-block|syntax|javascript|214007|entityMap^0|2|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Using the <code>textlayerrendered</code> event worked for me:

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

blocks|key|209547|text|里昂的解决方案更加稳健。但这是我能找到的最简单的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|209548|var+renderTask+=+pdfPage.render(renderContext);
renderTask.promise.then(
++function+pdfPageRenderCallback()+{
++++pageViewDrawCallback(null);
++},
++function+pdfPageRenderError(error)+{
++++pageViewDrawCallback(error);
++}
);|code-block|syntax|javascript|209549|从位于http://mozilla.github.io/pdf.js/web/viewer.html的代码中删除和修改了|offset|length|209550|unordered-list-item|209551|209552|entityMap|0|LINK|mutability|MUTABLE|url|http://mozilla.github.io/pdf.js/web/viewer.html^0|0|0|3|1B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|-4|5|L|7|11|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Lyon's solution of more robust. But this is the simplest solution I could find.

<pre><code>var renderTask = pdfPage.render(renderContext);
renderTask.promise.then(
 function pdfPageRenderCallback() {
 pageViewDrawCallback(null);
 },
 function pdfPageRenderError(error) {
 pageViewDrawCallback(error);
 }
);
</code></pre>

<ul>
<li>Scrapped and modified from the code found at: <a href="http://mozilla.github.io/pdf.js/web/viewer.html" rel="nofollow">http://mozilla.github.io/pdf.js/web/viewer.html</a></li>
</ul>

blocks|key|2853826|text|在研究这些解决方案时，我在获取renderContext时遇到了问题，因此我最终使用了这种方法来听取pagerendered的意见|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2853827|document.addEventListener("pagerendered",+function(e){

});|code-block|syntax|javascript|2853828|在我的例子中，我只想在页面呈现后调用一些外部函数，只需要很少的工作。|2853829|希望这能有所帮助。干杯!|2853830|entityMap^0|F|D|1E|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

While examining these solutions, I was having issues getting the <code>renderContext</code>, so I ended up using this approach listening to <code>pagerendered</code>:

<pre><code>document.addEventListener("pagerendered", function(e){

});
</code></pre>

In my case, I just wanted to call some external function after the page was rendered, with minimal effort.

Hope this helps. Cheers!

blocks|key|214041|text|window.addEventListener('load',+function+()+{
++++PDFViewerApplication.eventBus.on('textlayerrendered',+function+()+{
++++++console.log('textlayerrendered',+arguments,+PDFViewerApplication)
++++})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|214042|事件名称textlayerrendered包含PDFViewerApplication.eventBus._listeners|unstyled|offset|length|style|CODE|214043|entityMap^0|0|4|H|N|14|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]|$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|S|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>window.addEventListener('load', function () {
 PDFViewerApplication.eventBus.on('textlayerrendered', function () {
 console.log('textlayerrendered', arguments, PDFViewerApplication)
 })
</code></pre>
Event name <code>textlayerrendered</code> includes of <code>PDFViewerApplication.eventBus._listeners</code>

blocks|key|3067558|text|根据来自PDF.js的文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3067559|对于2.2之前的版本，请使用：|3067560|page.render(renderContext).then(function(){|style|CODE|3067561|var+myImage+=+new+Image();|3067562|myImage.src+=+document.getElementById('my-canvas-id').toDataURL();|3067563|$('body').append(myImage);|3067564|});|3067565|对于2.2及之后的版本，请使用：page.render(renderContext).promise.then(function(){|3067566|var+myImage+=+new+Image();|3067567|myImage.src+=+document.getElementById('my-canvas-id').toDataURL();|3067568|3067569|3067570|entityMap|0|LINK|mutability|MUTABLE|url|https://mozilla.github.io/pdf.js/examples/^0|4|6|0|0|0|0|17|0|0|Q|0|0|1U|0|0|Q|0|0|3|0|G|1F|0|0|Q|0|0|1U|0|0|Q|0|0|3|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1C|8|@$A|1D|B|1E|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1F|8|@$A|1G|B|1H|H|I]]|9|@]|C|$]]|$1|L|3|M|5|6|7|1I|8|@$A|1J|B|1K|H|I]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1L|8|@$A|1M|B|1N|H|I]]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1O|8|@$A|1P|B|1Q|H|I]]|9|@]|C|$]]|$1|R|3|S|5|6|7|1R|8|@$A|1S|B|1T|H|I]]|9|@]|C|$]]|$1|T|3|U|5|6|7|1U|8|@$A|1V|B|1W|H|I]]|9|@]|C|$]]|$1|V|3|W|5|6|7|1X|8|@$A|1Y|B|1Z|H|I]]|9|@]|C|$]]|$1|X|3|O|5|6|7|20|8|@$A|21|B|22|H|I]]|9|@]|C|$]]|$1|Y|3|Q|5|6|7|23|8|@$A|24|B|25|H|I]]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|26|8|@]|9|@]|C|$]]]|10|$11|$5|12|13|14|C|$15|16]]]]

According to documentation from <a href="https://mozilla.github.io/pdf.js/examples/" rel="nofollow noreferrer">PDF.js</a>.
for versions before 2.2 use: 
<code>page.render(renderContext).then(function(){</code> <code> var myImage = new Image();</code> <code> myImage.src = document.getElementById('my-canvas-id').toDataURL();</code> <code> $('body').append(myImage);</code> <code> });</code>
For versions after and including 2.2 use:
<code>page.render(renderContext).promise.then(function(){</code> <code> var myImage = new Image();</code> <code> myImage.src = document.getElementById('my-canvas-id').toDataURL();</code> <code> $('body').append(myImage);</code> <code> });</code>

blocks|key|213898|text|我用这种方式修改了我的代码，它帮助我完成了我想要做的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213899|pageRendering+=+page.render(renderContext);
pageRendering.onData(function(){
++++var+myImage+=+new+Image();
++++myImage.src+=+document.getElementById('my-canvas-id').toDataURL();
++++$('body').append(myImage);
});|code-block|syntax|javascript|213900|这仅在特定页面已完成呈现时才有帮助。它不会告诉您所有页面的呈现方式。|213901|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I have changed my code in this way and it helped me what I wanted to do:

<pre><code>pageRendering = page.render(renderContext);
pageRendering.onData(function(){
 var myImage = new Image();
 myImage.src = document.getElementById('my-canvas-id').toDataURL();
 $('body').append(myImage);
});
</code></pre>

This helps only if the specific page has finished rendering. it doesn't tell you about the rendering of all of the pages.

blocks|key|213965|text|如果你想在不同的画布中呈现pdf文档的所有页面，一个接一个地同步，这是一种解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213966|index.html|213967|<!doctype+html>
<html+lang="en">
<head>
++++<meta+charset="UTF-8">
++++<title>PDF+Sample</title>
++++<script+type="text/javascript"+src="jquery.js"></script>
++++<script+type="text/javascript"+src="pdf.js"></script>
++++<script+type="text/javascript"+src="main.js">
++++</script>
++++<link+rel="stylesheet"+type="text/css"+href="main.css">
</head>
<body+id="body">++
</body>
</html>|code-block|syntax|javascript|213968|main.css|213969|canvas+{
++++display:+block;
}|213970|main.js|213971|$(function()+{++
++++var+filePath+=+"document.pdf";

++++function+Num(num)+{
++++++++var+num+=+num;

++++++++return+function+()+{
++++++++++++return+num;
++++++++}
++++};

++++function+renderPDF(url,+canvasContainer,+options)+{
++++++++var+options+=+options+%7C%7C+{
++++++++++++++++scale:+1.5
++++++++++++},++++++++++
++++++++++++func,
++++++++++++pdfDoc,
++++++++++++def+=+$.Deferred(),
++++++++++++promise+=+$.Deferred().resolve().promise(),+++++++++
++++++++++++width,+
++++++++++++height,
++++++++++++makeRunner+=+function(func,+args)+{
++++++++++++++++return+function()+{
++++++++++++++++++++return+func.call(null,+args);
++++++++++++++++};
++++++++++++};

++++++++function+renderPage(num)+{++++++++++
++++++++++++var+def+=+$.Deferred(),
++++++++++++++++currPageNum+=+new+Num(num);
++++++++++++pdfDoc.getPage(currPageNum()).then(function(page)+{
++++++++++++++++var+viewport+=+page.getViewport(options.scale);
++++++++++++++++var+canvas+=+document.createElement('canvas');
++++++++++++++++var+ctx+=+canvas.getContext('2d');
++++++++++++++++var+renderContext+=+{
++++++++++++++++++++canvasContext:+ctx,
++++++++++++++++++++viewport:+viewport
++++++++++++++++};

++++++++++++++++if(currPageNum()+===+1)+{+++++++++++++++++++
++++++++++++++++++++height+=+viewport.height;
++++++++++++++++++++width+=+viewport.width;
++++++++++++++++}

++++++++++++++++canvas.height+=+height;
++++++++++++++++canvas.width+=+width;

++++++++++++++++canvasContainer.appendChild(canvas);

++++++++++++++++page.render(renderContext).then(function()+{++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++def.resolve();
++++++++++++++++});
++++++++++++})

++++++++++++return+def.promise();
++++++++}

++++++++function+renderPages(data)+{
++++++++++++pdfDoc+=+data;

++++++++++++var+pagesCount+=+pdfDoc.numPages;
++++++++++++for+(var+i+=+1;+i+<=+pagesCount;+i%2B%2B)+{+
++++++++++++++++func+=+renderPage;
++++++++++++++++promise+=+promise.then(makeRunner(func,+i));
++++++++++++}
++++++++}

++++++++PDFJS.disableWorker+=+true;
++++++++PDFJS.getDocument(url).then(renderPages);+++++++
++++};

++++var+body+=+document.getElementById("body");
++++renderPDF(filePath,+body);
});|213972|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If you want to render all pages of pdf document in different canvases, all one by one synchronously this is kind of solution:

index.html

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;PDF Sample&lt;/title&gt;
 &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="pdf.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="main.js"&gt;
 &lt;/script&gt;
 &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
&lt;/head&gt;
&lt;body id="body"&gt; 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

main.css

<pre><code>canvas {
 display: block;
}
</code></pre>

main.js

<pre><code>$(function() { 
 var filePath = "document.pdf";

 function Num(num) {
 var num = num;

 return function () {
 return num;
 }
 };

 function renderPDF(url, canvasContainer, options) {
 var options = options || {
 scale: 1.5
 }, 
 func,
 pdfDoc,
 def = $.Deferred(),
 promise = $.Deferred().resolve().promise(), 
 width, 
 height,
 makeRunner = function(func, args) {
 return function() {
 return func.call(null, args);
 };
 };

 function renderPage(num) { 
 var def = $.Deferred(),
 currPageNum = new Num(num);
 pdfDoc.getPage(currPageNum()).then(function(page) {
 var viewport = page.getViewport(options.scale);
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 var renderContext = {
 canvasContext: ctx,
 viewport: viewport
 };

 if(currPageNum() === 1) { 
 height = viewport.height;
 width = viewport.width;
 }

 canvas.height = height;
 canvas.width = width;

 canvasContainer.appendChild(canvas);

 page.render(renderContext).then(function() { 
 def.resolve();
 });
 })

 return def.promise();
 }

 function renderPages(data) {
 pdfDoc = data;

 var pagesCount = pdfDoc.numPages;
 for (var i = 1; i &lt;= pagesCount; i++) { 
 func = renderPage;
 promise = promise.then(makeRunner(func, i));
 }
 }

 PDFJS.disableWorker = true;
 PDFJS.getDocument(url).then(renderPages); 
 };

 var body = document.getElementById("body");
 renderPDF(filePath, body);
});
</code></pre>

blocks|key|3067331|text|事实证明，您的第一行page.render(renderContext);返回一个RenderTask对象，该对象具有3个属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3067332|3067333|internalRenderTask+-+an+InternalRenderTask，duh|unordered-list-item|3067334|cancel+-一个函数，大概允许您取消渲染工作|3067335|promise-a+jQuery+Promise+object|3067336|3067337|承诺就是你想要的。为了使用它，它是这样的：|3067338|+page.render(renderContext).promise.then(function()+{

+++++//do+something+after+the+page+is+rendered+here
+});|code-block|syntax|javascript|3067339|希望这能有所帮助。|3067340|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/Types/#Promise^0|A|R|15|A|0|0|O|I|0|0|H|7|H|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|J|3|K|5|I|7|1E|8|@]|D|@]|E|$]]|$1|L|3|M|5|I|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|N|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1N|8|@]|D|@]|E|$T|U]]|$1|V|3|W|5|6|7|1O|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

As it turns out, your first line, <code>page.render(renderContext);</code> returns a <code>RenderTask</code> object which has 3 properties:
<ul>
<li>internalRenderTask - an <code>InternalRenderTask</code>, duh</li>
<li>cancel - a function, presumably to allow you to cancel the rendering effort</li>
<li>promise - a jQuery <a href="http://api.jquery.com/Types/#Promise" rel="nofollow noreferrer"><code>Promise</code></a> object</li>
</ul>
The Promise is the one you want. To make use of it, it goes like this:
<pre><code> page.render(renderContext).promise.then(function() {

 //do something after the page is rendered here
 });
</code></pre>
Hope that helps.

blocks|key|3067456|text|根据您正在使用的PDF.js组件(和版本)，您也可以使用EventBus。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3067457|如果您使用的是最简单的PDF.js实现，那么这可能不可用，但是如果您使用的是他们的SimpleViewer+or+PageViewer+examples，请尝试如下所示：|offset|length|3067458|++++++++eventBus.on("pagesloaded",+function()+{
++++++++++++console.log('pagesloaded');
++++++++++++//+your+code+here
++++++++});|code-block|syntax|javascript|3067459|eventBus应该已经定义，如果没有，您可以使用以下命令设置它：|3067460|var+eventBus+=+new+pdfjsViewer.EventBus();|3067461|同样，这取决于PDF查看器中的复杂程度。事实证明，PDF.js中有许多不同的层。|3067462|要侦听每次加载的页面，请使用eventBus事件'pagerendered‘|style|CODE|3067463|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mozilla/pdf.js/tree/master/examples/components^0|0|15|Z|0|0|0|0|0|0|P|C|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

Depending on which components (and version) of PDF.js you are making use of, you can also use the EventBus.
If you are using the simplest implementation of PDF.js then this might not be available, but if you are using their <a href="https://github.com/mozilla/pdf.js/tree/master/examples/components" rel="nofollow noreferrer">SimpleViewer or PageViewer examples</a>, try this:
<pre><code> eventBus.on(&quot;pagesloaded&quot;, function() {
 console.log('pagesloaded');
 // your code here
 });

</code></pre>
eventBus should already be defined, if not, you can set it up using:
<pre><code>var eventBus = new pdfjsViewer.EventBus();
</code></pre>
Again, this depends on the level of complexity in your PDF Viewer. Turns out there are many different layers within PDF.js.
To listen for every page load, use the eventBus event '<code>pagerendered</code>'

blocks|key|214097|text|如果您在查看器应用程序中使用pdf.js，下面是我找到的等待其初始化的最佳方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|214098|//+Wait+for+the+PDFViewerApplication+to+initialize+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
PDFViewerApplication.initializedPromise.then(function()+{
++++//+Do+whatever+startup+code+you+need+to+here,+now+that+the+EventBus
++++//+is+read.+For+example:
++++PDFViewerApplication.eventBus.on('pagerendered',+function+(e)+{
++++++++annotationInterface.onPageRendered(e);
++++});
});|code-block|syntax|javascript|214099|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're using pdf.js with the viewer application, here's the best way I've found to wait for it to be initialized:
<pre><code>// Wait for the PDFViewerApplication to initialize 
PDFViewerApplication.initializedPromise.then(function() {
 // Do whatever startup code you need to here, now that the EventBus
 // is read. For example:
 PDFViewerApplication.eventBus.on('pagerendered', function (e) {
 annotationInterface.onPageRendered(e);
 });
});
</code></pre>

blocks|key|214009|text|page.render是一个承诺，所以你必须在你的成功中做你的事情，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|214010|page.render({
++canvasContext:+context,
++viewport:+viewport
}).then(function()+{
//do+your+stuff+here+});|code-block|syntax|javascript|214011|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

page.render is a promise so you have to do your stuff inside your success like below:

<pre><code>page.render({
 canvasContext: context,
 viewport: viewport
}).then(function() {
//do your stuff here });
</code></pre>

blocks|key|2853982|text|这是我发现的唯一一种使用Viewer+API并无错误地操作渲染页面的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2853983|onPagesLoaded+=+()+=>+{+
++++//+do+something,+set+zoom,+current+page,+...
};

window.PDFViewerApplication.eventBus.on('pagesloaded',+onPagesLoaded);|code-block|syntax|javascript|2853984|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the only way I've found to use the Viewer API and manipulate rendered pages without errors.
<pre><code>onPagesLoaded = () =&gt; { 
 // do something, set zoom, current page, ...
};

window.PDFViewerApplication.eventBus.on('pagesloaded', onPagesLoaded);
</code></pre>

blocks|key|3067666|text|如果您在后端创建/修改PDF，您可以将pdfjavascript添加到PDF文件以在加载时打印。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3067667|var+pp+=+getPrintParams();++
pp.interactive=pp.constants.interactionLevel.full;+
print(pp);|code-block|syntax|javascript|3067668|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are creating/modifying the PDF on the backend you can add pdfjavascript to the PDF file to print on load.
<pre><code>var pp = getPrintParams(); 
pp.interactive=pp.constants.interactionLevel.full; 
print(pp);
</code></pre>

I am using PDF.JS to render pdf pages into different canvas elements. my requirement is to capture the output of the canvas and to display it as an image. Is there some event to know if the rendering of the pdf page in canvas has been finished or not. because when I try to capture the output of canvas it is blank. but the pdf page is rendered properly. it looks like my capture event is being called before the pdf.js finishes the rendering process.

here is my code:

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

If I execute the same code in my FireFox's console this works fine. so nothing is wrong with this code. 

Just to let you people know that I already have tried document.ready and window.load events.

How to know if PDF.JS has finished rendering?

jQuery

我使用PDF.JS将pdf页面渲染到不同的画布元素中。我的需求是捕获画布的输出并将其显示为图像。是否有一些事件可以知道pdf页面在canvas中的渲染是否已经完成。因为当我尝试捕获canvas的输出时，它是空白的。但是pdf页面被正确地呈现。看起来像是在pdf.js完成呈现过程之前调用了我的捕获事件。下面是我的代码：page.render(renderContext);var myImage = 

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

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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