Pdf.js: ¿Devolución de llamada para cuando el PDF haya terminado de renderizarse?

Creado en 30 dic. 2014  ·  17Comentarios  ·  Fuente: mozilla/pdf.js

Necesito renderizar un degradado para cubrir la mitad inferior del PDF renderizado. Trabajo para un periódico y estamos creando una aplicación que muestra el periódico con un adelanto antes de suscribirse.

El problema es que el degradado debe pintarse sobre el PDF, por lo que debe esperar hasta que el PDF termine de procesarse. De hecho, en los navegadores móviles, intentar el renderizado degradado antes de que el PDF esté terminado da como resultado un comportamiento extremadamente salvaje (el lienzo se vuelve a renderizar y parpadea cada vez que la página se desplaza aunque sea un poco), lo que resulta en repintados constantes y el contenido se renderizará al revés. algunas veces.

Simplemente, necesito ejecutar una devolución de llamada cuando el PDF haya terminado de renderizarse.

¿Pueden ustedes apoyar las devoluciones de llamada? ¿O enviar un evento cuando finalice el renderizado?

Comentario más útil

Usar el evento textlayerrendered funciona para mí:

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

Todos 17 comentarios

Tenemos el evento 'pagerenderizado' o render () devuelve la promesa. El visor genérico nunca muestra todas las páginas, por lo que el visor no podrá corregirlo, a menos que introduzcamos un modo para el objeto PDFViewer cuando muestra todas las páginas.

Ok, entonces, ¿desde qué objeto se dispara un evento 'pagerendered'? @yurydelendik

Consulte https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225 y un ejemplo de uso en https://github.com/mozilla/pdf.js/blob/master/web /visor.js#L1733

Tenga en cuenta que no tenemos API para el visor. Solo la API que lanzamos es para la representación central y de lienzo (consulte src/display/api.js).

@yurydelendik Estoy usando esto con lienzo, en el navegador. Estoy un poco confundido acerca de dónde más PDF JS es relevante. Eso me confundió de inmediato, pero de todos modos, parece que tienes lo que estoy buscando. ¡Muchas gracias!

Cerrando como resuelto.

Tengo problemas para captar este evento.

Escucho (Jquery) el evento pagerendered como se muestra en los documentos anteriores:

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

y renderice el PDF en el lienzo:

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

Activar el evento yo mismo funciona correctamente, por lo que mi oyente está configurado correctamente y se adjunta mucho antes de que se llame a page.render(renderContext) .

Tal vez entendí mal el disparador del evento. ¿Cuándo exactamente se debe disparar el evento pagerendered del documento?

@yurydelendik

Si no está utilizando el visor genérico, el evento no se activará. Lo siento, no entendí lo que estás preguntando.

Consulte https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 para ver cómo esperar a que finalice el renderizado. jQuery será menos útil aquí, intente aprender a usar Promises.

@yurydelendik Ahora lo entiendo, ¡muchas gracias por su tiempo!

Usar el evento textlayerrendered funciona para mí:

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

Usando su fragmento de código anterior, simplemente haría:

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

@brendandahl gracias)

¡Gracias @lucdetellis ! He estado intentando que un botón externo al visor active la funcionalidad de impresión, pero nunca funcionó debido al error dado. El uso de su solución dentro de una función me permitió activar esa función desde el marco principal y luego window.focus() y window.print() cuando terminó de renderizar, y BAM, el problema se resolvió. Estaba buscando una solución para esto. :)

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

Nunca me llaman...

Lo llamo así (al final 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);

Perdone mi ignorancia de javascript, soy un desarrollador de Android que intenta obtener devoluciones de llamada js para cuando el PDF haya terminado de procesarse porque tengo algunos problemas específicos de Android ... Cualquier ayuda sería muy apreciada.

Actualizado:
El problema era que la visibilidad de mi Android WebView no estaba configurada en VISIBLE , por lo que ninguno de los eventos JS se activaba.

Usando el visor provisto con pdf.js, el evento pagesloaded funcionó para mí (abro el cuadro de diálogo de impresión tan pronto como termina de cargarse):

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

@turquoise-turtle, ¿adjuntó el detector de eventos al documento principal o al iframe donde tiene el visor?

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

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

estoy haciendo esto y no parece funcionar

establezca "eventBusDispatchToDOM": verdadero en viewer.js ¿por qué nadie dice esto?

Parece que el valor predeterminado se cambió para no enviar eventos a DOM alrededor de agosto a septiembre, observando el # 10019

¿Fue útil esta página
0 / 5 - 0 calificaciones