如何将pdf.js嵌入fancybox答案

【问题标题】：How to embed pdf.js in a fancybox如何将pdf.js嵌入fancybox
【发布时间】：2017-03-09 18:59:47
【问题描述】：

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

【问题讨论】：

标签： javascript pdf fancybox embed pdfobject

【解决方案1】：

这是我如何将 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>

【讨论】：