pdfjs：如何创建多个画布更显示所有网页？ [英] pdfjs: How to create more than one canvas to show all the pages?

问题描述

我下面的方法
<一href=\"http://stackoverflow.com/questions/16480469/how-to-display-whole-pdf-not-only-one-page-with-pdf-js/19099203?noredirect=1#comment44977782_19099203\">here.的问题是，所有的页面在第一画布。这是因为我只有一个画布，我不知道我怎么能一后产生更多的画布吗？

 函数handlePages（页）
        {
            变种视= page.getViewport（canvas.width / page.getViewport（1.0）.WIDTH）;
            变种CTX = canvas.getContext（'2D'）;            canvas.height = viewport.height;
            canvas.width = viewport.width;            page.render（{canvasContext：CTX，视：视}）;            //将它添加到网页
            div.appendChild（画布）;
                //移动到下一个页面
                currPage ++;
                如果（$ scope.pdfDoc == NULL和放大器;！＆安培; currPage＆LT; = NUM​​PAGES）
                {
                    $ scope.pdfDoc.getPage（currPage）。然后（handlePages）;
                }        }
 

解决方案

在切出从你把这个链接的答案code的一部分。注意使用document.createElement（帆布）。这会为每个页面一个新的画布。

I am following the approach of here. The problem is that all the pages are in first canvas. This is because I have only one canvas and I am not sure how I can generate more canvas one after other?

 function handlePages(page)
        {
            var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
            var ctx = canvas.getContext('2d');

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            page.render({ canvasContext: ctx, viewport: viewport });

            //Add it to the web page
            div.appendChild( canvas);
                //Move to next page
                currPage++;
                if ( $scope.pdfDoc !== null && currPage <= numPages )
                {
                    $scope.pdfDoc.getPage( currPage ).then( handlePages );
                }



        }

解决方案

you cut out part of the code from the linked answer that you took this from. notice the document.createElement( "canvas" ). That creates a new canvas for every page.

这篇关于pdfjs：如何创建多个画布更显示所有网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！