javascript - 如何将pdf.js嵌入fancybox

Question

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

score 5 · Accepted Answer

这是我如何将 pdf.js 与 fancybox 一起使用的解决方案。它适用于 x 浏览器（至少我尝试过的那些），自动和动态缩放到浏览器视图大小并且看起来不错！但是，浏览器之间的确切加载行为可能会有所不同。

你需要包含 jquery、fancybox 和 pdf.js：

如果您想将 pdf.js 嵌入静态 div 而不是花哨的盒子，请查看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>

javascript - 如何将pdf.js嵌入fancybox

1 回答 1

Related

Reference