canvas - how to access canvas element when rendering a pdf using pdf.js

Question

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")???

Answer 1

PDF.js 每绘制一个页面使用一个画布，其余的 UI 是使用普通 HTML 代码完成的。文档树的相关部分如下所示：

<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>

所以你可以得到一个单独的页面画布document.getElementById("page" + page_num)，或者，也许更健壮，通过 xpath：

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

如果要选择所有画布元素，使用 xpath 也很容易：

//div[@id='viewer']//canvas
# or
//div[@id='viewer']//canvas[contains(@id, 'page')]