如何在一個fancybox中嵌入pdf.js

Fancybox很棒，但默認的PDF實現不能很好地工作，因爲支持，外觀和感覺取決於操作系統，瀏覽器和Adobe安裝。通過使用基於Web標準的平臺解析和呈現PDF，PDF.js解決了這個問題。如何將pdf.js查看器嵌入到fancybox中？如何在一個fancybox中嵌入pdf.js

來源

2016-10-27 David

以下是我的解決方案，您可以如何將pdf.js與fancybox一起使用。它適用於X瀏覽器（至少我嘗試過），自動&動態縮放到瀏覽器視圖大小，看起來不錯！但是，瀏覽器的確切加載行爲可能有點不同。

您將需要包括jQuery的，和的fancybox pdf.js：

如果你想嵌入PDF。 js裏面的靜態div而不是o f 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>

來源

2016-10-27 07:30:59 David

如何在一個fancybox中嵌入pdf.js

回答

相關問題