html5 - plugin - ¿Cómo saber si PDF.JS ha terminado de renderizar?
plugin pdf js (10)
Estoy utilizando PDF.JS para representar páginas pdf en diferentes elementos de lienzo. mi requisito es capturar la salida del lienzo y mostrarlo como una imagen. ¿Hay algún evento para saber si la representación de la página pdf en lienzo se ha completado o no? porque cuando intento capturar la salida del lienzo está en blanco. pero la página pdf se representa correctamente. Parece que se está llamando a mi evento de captura antes de que pdf.js finalice el proceso de representación.
Aquí está mi código:
page.render(renderContext);
var myImage = new Image();
myImage.src = document.getElementById(''my-canvas-id'').toDataURL();
$(''body'').append(myImage);
Si ejecuto el mismo código en la consola de mi FireFox, esto funciona bien. así que nada está mal con este código.
Solo para hacerle saber a la gente que ya he probado los eventos document.ready y window.load.
En el momento de escribir esto, esto funcionó. No estoy seguro de si todavía lo hace.
PDFJS hace uso de las Promises . Lo más fácil de hacer es lo siguiente:
page.render(renderContext).promise.then(function(){
document.body.appendChild(canvas);
});
Como resultado, su primera línea, page.render(renderContext); devuelve un objeto RenderTask que tiene 3 propiedades:
- internalRenderTask - una
InternalRenderTask, duh - cancelar : una función, probablemente para permitirle cancelar el esfuerzo de representación
- promesa - un objeto jQuery
Promise
La Promesa es la que tú quieres. Para hacer uso de él, va así:
page.render (renderContext) .promise .then (function () {
//do something after the page is rendered here});
Espero que ayude.
He cambiado mi código de esta manera y me ayudó lo que quería hacer:
pageRendering = page.render(renderContext);
pageRendering.onData(function(){
var myImage = new Image();
myImage.src = document.getElementById(''my-canvas-id'').toDataURL();
$(''body'').append(myImage);
});
Esto ayuda solo si la página específica ha terminado de renderizarse. no le informa sobre la representación de todas las páginas.
La solución de Lyon es más robusta. Pero esta es la solución más simple que pude encontrar.
var renderTask = pdfPage.render(renderContext);
renderTask.promise.then(
function pdfPageRenderCallback() {
pageViewDrawCallback(null);
},
function pdfPageRenderError(error) {
pageViewDrawCallback(error);
}
);
- Desguazado y modificado del código que se encuentra en: http://mozilla.github.io/pdf.js/web/viewer.html
Mientras examinaba estas soluciones, tenía problemas para obtener el "renderContext", por lo que terminé usando este enfoque:
document.addEventListener("pagerendered", function(e){
});
En mi caso, solo quería llamar a alguna función externa después de que la página se haya procesado, con el mínimo esfuerzo.
Espero que esto ayude. ¡Aclamaciones!
Si desea renderizar todas las páginas de un documento pdf en diferentes lienzos, una por una, de forma sincrónica, es una solución:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="main.js">
</script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="body">
</body>
</html>
main.css
canvas {
display: block;
}
main.js
$(function() {
var filePath = "document.pdf";
function Num(num) {
var num = num;
return function () {
return num;
}
};
function renderPDF(url, canvasContainer, options) {
var options = options || {
scale: 1.5
},
func,
pdfDoc,
def = $.Deferred(),
promise = $.Deferred().resolve().promise(),
width,
height,
makeRunner = function(func, args) {
return function() {
return func.call(null, args);
};
};
function renderPage(num) {
var def = $.Deferred(),
currPageNum = new Num(num);
pdfDoc.getPage(currPageNum()).then(function(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement(''canvas'');
var ctx = canvas.getContext(''2d'');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
if(currPageNum() === 1) {
height = viewport.height;
width = viewport.width;
}
canvas.height = height;
canvas.width = width;
canvasContainer.appendChild(canvas);
page.render(renderContext).then(function() {
def.resolve();
});
})
return def.promise();
}
function renderPages(data) {
pdfDoc = data;
var pagesCount = pdfDoc.numPages;
for (var i = 1; i <= pagesCount; i++) {
func = renderPage;
promise = promise.then(makeRunner(func, i));
}
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
};
var body = document.getElementById("body");
renderPDF(filePath, body);
});
También estaba luchando con este problema ... la solución que utilicé es:
//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
};
Usando el evento textlayerrendered funcionó para mí:
document.addEventListener(''textlayerrendered'', function (event) {
// was this the last page?
if (event.detail.pageNumber === PDFViewerApplication.page) {
console.log(''Finished rendering!'');
}
}, true);
page.render es una promesa, así que tienes que hacer tus cosas dentro de tu éxito como a continuación:
page.render({
canvasContext: context,
viewport: viewport
}).then(function() {
//do your stuff here });
<script type="text/javascript">
document.addEventListener("pagesloaded", function(e) {
//do sth..
});
</script>
trabajó para mi