使用pdf.js渲染pdf时如何访问canvas元素

Question

如何使用pdf.js呈现PDF的canvas元素。 我正在使用viewer.js在我的网站上呈现pdf文件。我想使用pdf渲染的canvas元素。怎么做。可以使用document.getElementById（“mycanvas”）???

来完成

Answer 1

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

<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')]