Pdf.js: PDF 렌더링이 완료되었을 때 콜백?

'pagerendered' 이벤트가 있거나 render()가 약속을 반환합니다. 일반 뷰어는 모든 페이지를 렌더링하지 않으므로 모든 페이지를 렌더링할 때 PDFViewer 개체에 대한 모드를 도입하지 않는 한 뷰어에 대해 수정할 수 없습니다.

자, 그럼 'pagerendered' 이벤트는 어떤 객체에서 발생할까요? @yurydelendik

https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225 및 사용 예는 https://github.com/mozilla/pdf.js/blob/master/web 에서 참조하십시오.

뷰어용 API가 없습니다. 우리가 릴리스한 API만 코어 및 캔버스 렌더링용입니다(src/display/api.js 참조).

@yurydelendik 나는 이것을 브라우저 내에서 캔버스와 함께 사용하고 있습니다. PDF JS가 다른 곳과 관련이 있는지 혼란 스럽습니다. 그것은 즉시 나를 혼란스럽게했지만 어쨌든 당신은 내가 찾고있는 것을 가지고있는 것 같습니다. 정말 고마워!

해결된 대로 종료합니다.

이 이벤트를 잡는 데 문제가 있습니다.

위의 문서에 표시된 대로 pagerendered 이벤트를 수신합니다(Jquery).

$(document).bind('pagerendered', function (e) {
    console.log('Page rendering complete.');
    //do stuff
});

캔버스에 PDF를 렌더링합니다.

PDFJS.getDocument('my_file.pdf').then(function(pdf) {
    pdf.getPage(1).then(function(page) {
        /* .. snip .. */
        var scaledViewport = page.getViewport(scale);
        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;
        var renderContext = {
            canvasContext : context,
            viewport : scaledViewport
        };
        page.render(renderContext);
});

직접 이벤트를 트리거하면 성공적으로 작동하므로 리스너가 제대로 설정되고 page.render(renderContext) 가 호출되기 훨씬 전에 연결됩니다.

이벤트 트리거를 잘못 이해한 것 같습니다. 문서에서 정확히 언제 pagerendered 이벤트가 발생해야 합니까?

@yurydelendik

일반 뷰어를 사용하지 않는 경우 이벤트가 트리거되지 않습니다. 죄송합니다. 질문을 이해하지 못했습니다.

렌더링이 완료될 때까지 기다리는 방법은 https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 을 참조하세요. jQuery는 여기에서 덜 유용할 것입니다. Promises를 사용하는 방법을 배우십시오.

@yurydelendik 이제 이해했습니다. 시간 내주셔서 감사합니다!

textlayerrendered 이벤트를 사용하면 다음과 같이 작동합니다.

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

위의 스니펫을 사용하면 간단히 다음을 수행할 수 있습니다.

page.render(renderContext).then(function() {
  console.log("FINISHED RENDERING!");
}, function() {
  console.log("ERROR");
});

@brendandahl 감사합니다)

@lucdetellis 감사합니다! 뷰어 외부의 버튼이 인쇄 기능을 트리거하도록 하려고 했지만 주어진 오류로 인해 작동하지 않습니다. 함수 내에서 솔루션을 사용하면 부모 프레임에서 해당 함수를 트리거한 다음 렌더링이 완료되면 window.focus() 및 window.print()를 트리거하고 BAM, 문제가 해결되었습니다. 이에 대한 솔루션을 전체적으로 찾고 있었습니다. :)

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

나한테 전화한 적 없어...

나는 그것을 이렇게 부르고 있습니다 (끝에 viewer.js ):

document.addEventListener('textlayerrendered', function (e) {
      console.log("textlayerrendered event called!");
    if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
      console.log("FINISHED RENDERING!");
      Android.makeWebViewVisible();
     } else {
     console.log("NOT DONE RENDERING!");
     }
}, true);

document.addEventListener('DOMContentLoaded', webViewerLoad, true);

자바스크립트에 대한 무지를 용서해 주세요. 저는 Android 개발자입니다. 일부 Android 관련 문제가 발생했기 때문에 PDF 렌더링이 완료되었을 때 js 콜백을 얻으려고 합니다. 어떤 도움이라도 주시면 감사하겠습니다.

업데이트됨:
문제는 내 Android WebView 의 가시성이 VISIBLE 로 설정되지 않았으므로 JS 이벤트가 트리거되지 않는다는 것입니다.

pdf.js와 함께 제공되는 뷰어를 사용하여 pagesloaded 이벤트가 저에게 효과적이었습니다(로드가 완료되는 즉시 인쇄 대화 상자를 엽니다).

document.addEventListener('pagesloaded', function (e) {
    window.print();
}, true);

@turquoise-turtle 이벤트 리스너를 기본 문서에 연결했습니까 아니면 뷰어가 있는 iframe에 연결했습니까?

var iframe = document.getElementById('iframe').contentDocument;

                            iframe.addEventListener('pagesloaded', function (e) {
                                alert("loaded");
                            }, true);

나는 이것을하고 있고 작동하지 않는 것 같습니다

set "eventBusDispatchToDOM": viewer.js에서 true인 이유는 아무도 이것을 말하지 않는 이유입니다!

#10019를 보면 8월에서 9월 사이에 DOM에 이벤트를 발송하지 않도록 기본값이 변경된 것 같습니다.