使用 pdf.js 渲染 pdf 时如何访问画布元素答案

【问题标题】：how to access canvas element when rendering a pdf using pdf.js使用 pdf.js 渲染 pdf 时如何访问画布元素
【发布时间】：2014-03-19 11:42:18
【问题描述】：

如何使用通过 pdf.js 呈现 PDF 的 canvas 元素。我正在使用 viewer.js 在我的网站中呈现 pdf 文件。我想使用在其上呈现 pdf 的 canvas 元素。怎么做。可以使用 document.getElementById("mycanvas") 来完成吗？？？

【问题讨论】：

标签： canvas pdf.js pdfviewer

【解决方案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')]

【讨论】：

谢谢。请告诉我如何知道 pdf 文件是否完成渲染。我应该调用什么事件，以便在 pdf 完全呈现后访问画布。