0

How to use the canvas element on which the PDF will be rendered using pdf.js. I am using viewer.js to render a pdf file in my webnsite. I want to use the canvas element on which the pdf gets rendered. how to do it. Can it be done using document.getElementById("mycanvas")???

Aditya.M
  • 35
  • 1
  • 1
  • 7

1 Answers1

1

PDF.js uses a one canvas per page it draws, the rest is of its UI is done using normal HTML code. The relevant part of the document tree looks like this:

<div id="viewer">
  <a name="1"></a>
  <div id="pageContainer1" data-loaded="true">
    <div class="canvasWrapper">
      <canvas id="page1"></canvas>
    </div>
    <div class="textLayer" style="width: 604px; height: 453px;"></div>
    <div class="annotationLayer"></div>
  </div>
  <div id="pageContainer2" data-loaded="true">
  ....
</div>

So you can get an individual page canvas as document.getElementById("page" + page_num), or, maybe more robustly, via an xpath:

//div[@id='viewer']//canvas[@id='page123']

If you want to select all canvas elements, that's also easy with xpath:

//div[@id='viewer']//canvas
# or
//div[@id='viewer']//canvas[contains(@id, 'page')]
Christian Aichinger
  • 6,989
  • 4
  • 40
  • 60
  • Thank you. Please tell me how to know if the pdf file finished rendering. What event should i be calling so that i can access canvas after pdf gets rendered completely. – Aditya.M Mar 19 '14 at 06:12