jquery 如何检测页面何时使用PDFJS呈现？

tuwxkamq 于 2024-01-07 发布在 jQuery

关注(0)|答案(3)|浏览(169)

一旦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...

型

jquery

来源：https://stackoverflow.com/questions/29663408/how-can-i-detect-when-page-has-been-rendered-with-pdfjs

3条答案

按热度按时间

4xrmg8kj1#

澄清一下，这是一个非常不同的故事。你不是直接使用PDF.JS，而是他们的Web Package 器。我认为你可以使用的一件事（我从来没有做过，只是阅读现在的代码）是他们在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
}

字符串
(Didn不测试，可能需要调整。）

赞(0）回复(0）举报 2024-01-07

agxfikkp2#

这就是我们如何检测页面的渲染。在设置侦听器之前，等待iframe内容加载是很重要的。

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

字符串

赞(0）回复(0）举报 2024-01-07

ncgqoxb03#

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

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 如何检测页面何时使用PDFJS呈现？

3条答案

相关问题

热门标签

最新问答