个人中心
gpt4 book ai didi

javascript - 如何将 pdf.js 嵌入到 fancybox 中

转载 作者：行者123 更新时间：2023-11-28 13:13:54 29 4
gpt4 key购买 nike

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

最佳答案

这是我的解决方案，如何将 pdf.js 与 fancybox 一起使用。它适用于 x 浏览器(至少是我尝试过的浏览器)，自动动态缩放到浏览器 View 大小，看起来不错!不过，不同浏览器的确切加载行为可能会有所不同。

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

enter image description here

如果您想将 pdf.js 嵌入静态 div 而不是 fancybox 中，请查看 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 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40278741/

29 4 0
文章推荐： css - 向下滚动动画或触发 block
文章推荐： ios - 如何在 Swift 中的相机层顶部添加文本框？
文章推荐： html - 如何摆脱 haml ul 中的子弹
文章推荐： ios - 在 TableView 选项中获取行 ID
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com