如何使用pdf.js渲染pdf時訪問畫布元素

Question

如何使用使用pdf.js渲染PDF的canvas元素。 我正在使用viewer.js在我的webnsite中呈現PDF文件。我想使用pdf呈現的canvas元素。怎麼做。可以使用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')]