如何在fancybox中嵌入pdf.js.

Question

如何在fancybox中嵌入pdf.js.

Dav*_*vid 0 javascript embed pdf fancybox pdfobject

Fancybox非常棒,但默认的pdf实现效果不佳,因为支持,外观和感觉取决于操作系统,浏览器和adobe的安装.PDF.js通过使用基于Web标准的平台解析和呈现PDF来解决这个问题.如何在fancybox中嵌入pdf.js查看器？

Answer 1

Dav*_*vid 5

这是我的解决方案如何将pdf.js与fancybox一起使用.它适用于x浏览器(至少是我尝试过的),自动和动态地扩展到浏览器视图大小,看起来很棒!但是,浏览器之间的确切加载行为可能略有不同.

您需要包含jquery,fancybox和pdf.js:

如果你想在静态div而不是fancybox中嵌入pdf.js,请查看https://pdfobject.com/

<html>
<head>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="./includes/js/jquery-3.1.1.min.js"></script>
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="./includes/js/fancybox/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="./includes/js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
    <script type="text/javascript">
        var pdfOpenParams = "#page=1&pagemode=none"; //pagemode=none,bookmarks,thumbs

        $(document).ready(function () {
            //Fancybox settings
            $(".fancybox-pdf").fancybox({
                type: 'iframe',
                padding: 0,
                openEffect: 'fade',
                openSpeed: 150,
                closeEffect: 'fade',
                closeSpeed: 150,
                closeClick: true,
                width: '60%',
                height: '100%',
                maxWidth: '100%',
                maxHeight: '100%',
                iframe: {
                    preload: false
                },
                //Define PDF.js viewer with optional parameters
                beforeLoad: function () {
                    var url = $(this.element).attr("href");
                    this.href = "./includes/js/pdfjs/web/viewer.html?file=" + url + pdfOpenParams;
                }
            });
        });
    </script>
</head>
<body>
    <a class="fancybox-pdf" href="http://localhost/pdf/pdf-sample.pdf">View PDF</a>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年前
查看次数：	2730 次
最近记录：	9 年前