Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- pdf.js v2.0.332 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.332/pdf.min.js"></script>
</head>
<body>
    <div>
        <button id="prev">上一頁</button>
        <button id="next">下一頁</button>
        <span>頁數: <span id="page_num"></span> / <span id="page_count"></span></span>
    </div>
    <canvas id="example"></canvas>
    <script>
        // pdf檔案路徑，如果是絕對路徑，請Server使用CORS
        var url = "//cdn.mozilla.net/pdfjs/tracemonkey.pdf";
        PDFJS.workerSrc = "//mozilla.github.io/pdf.js/build/pdf.worker.js";
​
        var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas = document.getElementById( "example" ),
        ctx = canvas.getContext( "2d" );
​
        function renderPage( num )
        {
            pageRendering = true;
            pdfDoc.getPage( num ).then( function( page ) {
                var viewport = page.getViewport( scale );
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.promise.then( function() {
                    pageRendering = false;
                    if ( pageNumPending !== null ) {
                        renderPage( pageNumPending );
                        pageNumPending = null;
                    }
                });
            });
            document.getElementById( "page_num" ).textContent = num;
        }
​
        function queueRenderPage( num )
        {
            if ( pageRendering ) {
                pageNumPending = num;
            } else {
                renderPage( num );
            }
        }
​
        // 上一頁
        function onPrevPage()
        {
            if ( pageNum <= 1 ) {
                return;
            }
            pageNum--;
            queueRenderPage( pageNum );
        }
        document.getElementById( "prev" ).addEventListener( "click", onPrevPage );
​
        // 下一頁
        function onNextPage()
        {
            if ( pageNum >= pdfDoc.numPages ) {
                return;
            }
            pageNum++;
            queueRenderPage( pageNum );
        }
        document.getElementById( "next" ).addEventListener( "click", onNextPage );
​
        PDFJS.getDocument( url ).then( function( pdfDoc_ ) {
            pdfDoc = pdfDoc_;
            document.getElementById( "page_count" ).textContent = pdfDoc.numPages;
            renderPage( pageNum );
        });
    </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers