[英]PDF.JS - Detect when page has been rendered
一旦PDF.JS已完成渲染的每一頁,我想那么做了查找/在該網頁的內容替換。
我通過將以下內容放在iFrame中的文檔中來調用PDF.JS:
<script>
fileId=0;
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var fileId = getURLParameter("fileId");
var DEFAULT_URL = '/viewer/fetchpdf.php?fileId='+fileId;
</script>
然后從父框架設置URL:
url = '/_third_party/pdfjs/web/viewer.html?fileId='+$(this).attr('href');
$("#iframeViewPdf").attr('src', url);
我注意到在使用PDF.JS渲染PDF時,它會使用加載占位符初始化每個頁面:
<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
<div class="loadingIcon"></div>
</div>
<div id="pageContainer4...
然后它將PDF呈現為html,例如
<div id="pageContainer3" class="page" style="width: 991px; height: 1319px;">
<div class="canvasWrapper" style="width: 991px; height: 1319px;">
<canvas id="page46" width="991" height="1319" style="width: 991px; height: 1319px;">
</canvas>
</div>
<div class="textLayer" style="width: 991px; height: 1319px;">
...
</div>
</div>
<div id="pageContainer4...
澄清一下,這是一個非常不同的故事。 您沒有直接使用PDF.JS,而是使用他們的Web包裝器。 我認為你可以使用的一件事(我從來沒有這樣做,只是現在閱讀代碼)是他們在document
上發出pageRendered
事件的事實,所以如果你可以添加一個監聽器,你應該沒問題:
var frameDoc = document.getElementById('iframeViewPdf').contentWindow.document;
frameDoc.addEventListener('pagerendered', function (evt) {
console.log(evt); // see what goodies hide here! like page number etc
}
(沒有測試,可能需要調整。)
這就是我們如何檢測頁面的呈現。 在設置監聽器之前等待iframe內容加載很重要。
$( "#iframeViewPdf" ).load(function() { // wait for iframe to load
var frameDoc = $("#iframeViewPdf").contents()[0];
frameDoc.addEventListener("pagerendered", function (evt) {
console.log(evt.detail);
});
});
//Step 1: store a refer to the renderer
var pageRendering = page.render(renderContext);
//Step : hook into the pdf render complete event
var completeCallback = pageRendering.internalRenderTask.callback;
pageRendering.internalRenderTask.callback = function (error) {
//Step 2: what you want to do before calling the complete method
completeCallback.call(this, error);
//Step 3: do some more stuff
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.