How to know if PDF.JS has finished rendering?

后端未结

关注

 12  1129

I am using PDF.JS to render pdf pages into different canvas elements. my requirement is to capture the output of the canvas and to display it as an image. Is there some even

相关标签:

12条回答

野趣味

2020-12-13 15:03
While examining these solutions, I was having issues getting the renderContext, so I ended up using this approach listening to pagerendered:
```
document.addEventListener("pagerendered", function(e){

});
```
In my case, I just wanted to call some external function after the page was rendered, with minimal effort.

Hope this helps. Cheers!
0 讨论(0)
发布评论:

提交评论
- 加载中...

刺人心

2020-12-13 15:08

Using the textlayerrendered event worked for me:

document.addEventListener('textlayerrendered', function (event) {
  // was this the last page?
  if (event.detail.pageNumber === PDFViewerApplication.page) {
    console.log('Finished rendering!');
  }
}, true);

0 讨论(0)

感情败类

2020-12-13 15:08

If you want to render all pages of pdf document in different canvases, all one by one synchronously this is kind of solution:

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

0 讨论(0)

太阳男子

2020-12-13 15:08
page.render is a promise so you have to do your stuff inside your success like below:
```
page.render({
  canvasContext: context,
  viewport: viewport
}).then(function() {
//do your stuff here });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
青春惊慌失措

2020-12-13 15:19
I have changed my code in this way and it helped me what I wanted to do:
```
pageRendering = page.render(renderContext);
pageRendering.onData(function(){
    var myImage = new Image();
    myImage.src = document.getElementById('my-canvas-id').toDataURL();
    $('body').append(myImage);
});
```
This helps only if the specific page has finished rendering. it doesn't tell you about the rendering of all of the pages.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2020-12-13 15:20
At the time of writing, this did work. I'm not sure if it still does.

PDFJS makes use of Promises. The easiest thing to do is the following:
```
page.render(renderContext).promise.then(function(){
  document.body.appendChild(canvas);
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2