Once PDF.JS has pleted rendered each page, I want to then do a find/replace on the contents of that page.

I invoke PDF.JS by putting the following in a document in an iFrame:

<script>
fileId=0;
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var fileId = getURLParameter("fileId");
var DEFAULT_URL = '/viewer/fetchpdf.php?fileId='+fileId;
</script>

and then setting the URL from the parent frame:

url = '/_third_party/pdfjs/web/viewer.html?fileId='+$(this).attr('href');
$("#iframeViewPdf").attr('src', url);

I've noticed when using PDF.JS to render a PDF, it initialises each page with a loading placeholder:

<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
    <div class="loadingIcon"></div>
</div>
<div id="pageContainer4...

It then renders the PDF as html, e.g.

<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
    <div class="canvasWrapper" style="width: 991px; height: 1319px;">
        <canvas id="page46" width="991" height="1319" style="width: 991px; height: 1319px;">
        </canvas>
    </div>
    <div class="textLayer" style="width: 991px; height: 1319px;">
        ...
    </div>
</div>
<div id="pageContainer4...

Once PDF.JS has pleted rendered each page, I want to then do a find/replace on the contents of that page.

I invoke PDF.JS by putting the following in a document in an iFrame:

<script>
fileId=0;
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var fileId = getURLParameter("fileId");
var DEFAULT_URL = '/viewer/fetchpdf.php?fileId='+fileId;
</script>

and then setting the URL from the parent frame:

url = '/_third_party/pdfjs/web/viewer.html?fileId='+$(this).attr('href');
$("#iframeViewPdf").attr('src', url);

I've noticed when using PDF.JS to render a PDF, it initialises each page with a loading placeholder:

<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
    <div class="loadingIcon"></div>
</div>
<div id="pageContainer4...

It then renders the PDF as html, e.g.

<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
    <div class="canvasWrapper" style="width: 991px; height: 1319px;">
        <canvas id="page46" width="991" height="1319" style="width: 991px; height: 1319px;">
        </canvas>
    </div>
    <div class="textLayer" style="width: 991px; height: 1319px;">
        ...
    </div>
</div>
<div id="pageContainer4...

• javascript
• jquery
• html
• dom
• pdf.js

3 Answers 3

With the clarification, it is a very different story. You are not using PDF.JS directly, but their web wrapper. One thing that I think you can use (I've never done it, just reading the code now) is the fact that they are emitting pageRendered event on the document, so if you can add a listener to it, you should be fine:

var frameDoc = document.getElementById('iframeViewPdf').contentWindow.document;

frameDoc.addEventListener('pagerendered', function (evt) {
  console.log(evt); // see what goodies hide here! like page number etc
}

(Didn't test, might need tweaking.)

So this is how we can detect the rendering of a page. It's important to wait for the iframe contents to load before setting up the listener.

$( "#iframeViewPdf" ).load(function() { // wait for iframe to load
    var frameDoc = $("#iframeViewPdf").contents()[0];     
    frameDoc.addEventListener("pagerendered", function (evt) { 
        console.log(evt.detail);
    });
});

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