PDF.JS - 檢測頁面已被渲染

一旦PDF.JS有完成渲染每頁，我想然後做一個查找/替換該頁面的內容。當使用PDF.JS - 檢測頁面已被渲染

url = '/_third_party/pdfjs/web/viewer.html?fileId='+$(this).attr('href'); 
$("#iframeViewPdf").attr('src', url);

我注意到：

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

，然後從父框架設定的網址：

我通過將以下文件中的iframe中調用PDF.JS 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...

來源

2015-04-16 user3321008

//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 
};

來源

2015-04-16 00:45:54

如果我正在閱讀文檔的權利，'page.render'返回一個承諾，爲什麼不''page.render（...）。next（function ...）'？我看不到內部的東西長期處於健康狀態...... – Amadan

@Amadan我想你正在閱讀文檔的權利，你可以，也可能必須這樣做。這是實現這一目標的另一種方式。 –

@Amadan - 請你能提供一些更多的細節，我不太清楚我會如何去實施你的建議？ – user3321008

隨着澄清，這是一個非常不同的故事。您不直接使用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 
}

（沒有測試，可能需要調整。）

來源

2015-04-16 01:40:30 Amadan

嘿，謝謝你的建議。解決方案缺少最後一個括號。不幸的是，似乎沒有拿起任何事件，現在玩它看我是否能找出原因。 – user3321008

我發現下面的代碼工作，你可以編輯你的答案來反映這一點？（）{0}; $（「#iframeViewPdf」）.load（function（）{//等待iframe加載 frameDoc.addEventListener（「pagerendered」，function（evt）{console.log（evt.detail）; }）; }）; – user3321008

所以這是我們如何能夠偵測網頁的渲染。在設置偵聽器之前等待加載iframe內容非常重要。

$("#iframeViewPdf").load(function() { // wait for iframe to load 
    var frameDoc = $("#iframeViewPdf").contents()[0];  
    frameDoc.addEventListener("pagerendered", function (evt) { 
     console.log(evt.detail); 
    }); 
});

來源

2015-04-17 15:33:12 user3321008

PDF.JS - 檢測頁面已被渲染

回答

相關問題