0

Fancybox は優れていますが、サポート、ルック アンド フィールは OS、ブラウザ、Adobe のインストールに依存するため、デフォルトの pdf 実装はうまく機能しません。PDF.js は、PDF の解析とレンダリングに Web 標準ベースのプラットフォームを使用することで、この問題を解決します。ファンシーボックス内にpdf.jsビューアを埋め込む方法は?

4

1 に答える 1

5

pdf.jsをfancyboxと一緒に使用する方法は私の解決策です。それは x ブラウザ (少なくとも私が試したもの) で動作し、ブラウザのビュー サイズに合わせて自動的かつ動的にスケーリングし、見栄えがします! ただし、正確な読み込み動作はブラウザー間で少し異なる場合があります。

jquery、fancybox、および pdf.js を含める必要があります。

ここに画像の説明を入力

ファンシーボックスではなく静的 div 内に 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>
于 2016-10-27T07:30:59.967 に答える