Как вставить pdf.js в fancybox

Fancybox отлично работает, но реализация по умолчанию pdf не очень хорошо работает, потому что поддержка, внешний вид и внешний вид зависят от установки ОС, браузера и Adobe. PDF.js решает, что с помощью платформы веб-стандартов для анализа и рендеринга PDF-файлов. Как встроить средство просмотра pdf.js внутри fancybox?Как вставить pdf.js в fancybox

источник

2016-10-27 David

Вот мое решение, как вы можете использовать pdf.js вместе с fancybox. Он работает с x-браузерами (по крайней мере, те, которые я пробовал), автоматически & динамически масштабируется до размера браузера и выглядит красиво! Однако точное поведение загрузки может немного отличаться между браузерами.

Вам нужно будет включить JQuery, FancyBox и pdf.js:

Если вы хотите вставлять PDF. js внутри статического div вместо o f a 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

Как вставить pdf.js в fancybox

ответ

Смежные вопросы