利用pdf.js开发嵌入pdf显示,以及利用jquery-ui左右分栏显示

WEB前端 waitig 863℃ 百度已收录 0评论

原来考虑用pdf.js的viewer.html页面,但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容,右侧显示其它相关内容,并且左右宽度可以任意拖动,最终实现效果如图:

代码:
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title> 

    <link rel="prefetch" href="/pdfview/test.pdf">

    <style>

        #pdfView > canvas {

            width: 100%;

        }

        .ui-resizable-handle {

            background-color: #699083;

            width: 4px !important;

            right: 0px !important;

        }

        .ui-resizable-e { 

            width: 4px !important;

            right: 0px !important;

        }

    </style>

</head>

<body style="background-color: #ffffff">

          <div style="width: 100%; height: 100%;" id="mainDiv">

            <div style="width: 50%; float: left; height: 100%;" id="resizeBoxLeft">               

                <div id="pdfView" style="width: 100%; height: 100%; overflow: auto; background-color: #ffffff; -webkit-overflow-scrolling: touch;"></div>

            </div>

            <div id="resizeBoxRight" style="width: 50%; float: right; height: 100%; background-color: #ffffff; -webkit-overflow-scrolling: touch;">

               <!—其它内容—>

            </div>

        </div>

    </form>

    <script type="text/javascript" src="/js/jquery/jquery-1.10.2.js"></script>

    <script src="/js/jquery/jquery-ui.js"></script>

    <link rel="stylesheet" href="/js/jquery/jquery-ui.css">

    <script src="build/pdf.js"></script>

    <script type="text/javascript">



        $(function ()

        {

            var url = ‘../pdfview/test.pdf’;

            PDFJS.workerSrc = ‘build/pdf.worker.js’;

            var scale = 1.5;      
            //逐页创建canvas显示pdf内容     

            PDFJS.getDocument(url).then(function (pdf)

            {                

                var pdfPageCount = pdf.numPages;

                var getPageAndRender = function (pageNumber)

                {

                    pdf.getPage(pageNumber).then(function (page)

                    {

                        var viewport = page.getViewport(scale);

                        var canvas = document.createElement(‘canvas’);

                        canvas.height = viewport.height;

                        canvas.width = viewport.width;

                        var renderContext = {

                            canvasContext: canvas.getContext(‘2d’),

                            viewport: viewport

                        };

                        page.render(renderContext);

                        $("#pdfView").append(canvas);                     

                    });

                    if (pageNumber <
pdfPageCount )


                    {

                        pageNumber++;

                        getPageAndRender(pageNumber);

                    }

                }

                getPageAndRender(1);



            });





            $("#resizeBoxLeft").resizable({              

                handles: ‘e’,              

                start: function() {

                     $("#resizeBoxRight").hide();//拖动时会影响拖动条向右拖动,所以拖动时隐藏,停止拖动再显示。(暂时没想到其它办法)

                },

                stop: function (event, ui)

                {
                          //计算左右两栏宽度 百分比

                    var rightWidth = $(document).width() – ui.size.width;

                    $("#resizeBoxLeft").css({ "width": parseInt((ui.size.width / $(document).width()) * 100) + "%", "height": "100%" });

                    $("#resizeBoxRight").css({ "width": parseInt((rightWidth / $(document).width()) * 100) + "%", "height": "100%" });

                    $("#resizeBoxRight").show();

                }

            });

        });

    </script>

</body>

</html>


本文由【waitig】发表在等英博客
本文固定链接:利用pdf.js开发嵌入pdf显示,以及利用jquery-ui左右分栏显示
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)