Blueimp Галерея Поддержка PDF

Question

Я использую blueimp галерею, чтобы показать некоторые загруженные изображения от клиентов

иногда они загружать также файлы в формате PDF и в настоящее время мы должны открыть вручную, в то время как было бы здорово, чтобы быть предварительный просмотр также PDF в blueimp галерее ,

Из документации, которую я вижу, что может быть "легко" добавить поддержку другого типа контента (ы):

https://github.com/blueimp/Gallery#example-html-text-factory-implementation

с очень немного фантазии ... я пробовал:

css: 

.blueimp-gallery > .slides > .slide > .pdf-content { 
    overflow: auto; 
    margin: 60px auto; 
    padding: 0 60px; 
    max-width: 1200px; 
    text-align: left; 
    color:white; 
} 

js: 

blueimp.Gallery.prototype.applicationFactory = function (obj, callback) { 
    var $element = $('<div>') 
      .addClass('pdf-content') 
      .attr('title', obj.title); 
    $.get(obj.href) 
     .done(function (result) { 
      $element.html(result); 
      callback({ 
       type: 'load', 
       target: $element[0] 
      }); 
     }) 
     .fail(function() { 
      callback({ 
       type: 'error', 
       target: $element[0] 
      }); 
     }); 
    return $element[0]; 
}; 

    $('#blueimpGallery-button').on('click', function (event) { 
     blueimp.Gallery([ 
      { 
       title: 'Test pdf_1', 
       href: '/docs/test1.pdf', 
       type: 'application/pdf' 
      }, 
      { 
       title: 'Test pdf_2', 
       href: '/docs/test2.pdf', 
       type: 'application/x-pdf' 
      }, 
      { 
       title: 'Test pdf_3', 
       href: '/docs/test3.pdf', 
       type: 'application/x-pdf' 
      } 

     ]); 
    }) 

и довольно неожиданно .. он работает, но pdf не распознается и отображается исходный код вот так: Я могу себе представить, что, по крайней мере, м типа mime, но я понятия не имею, как исправить это

может предложить направление? Спасибо

Answer 1

Я столкнулся с аналогичной проблемой, и вот «работоспособное» решение. Я использую ASP.Net MVC.

Я обнаруживаю расширение файла и отображаю статическое изображение пиктограммы PDF, а в теге привязки я добавил пользовательское событие onclick, чтобы открыть PDF-файл в новом окне. Но убедитесь, что ваш PDF визуализируются с соответствующими заголовками (то есть «приложение/PDF»)

<span> 
@{ 
bool IsPDF = item.FileName.ToLower().EndsWith(".pdf"); 
    string resURL = Url.Action("GetFile", "MyController") + "?" + item.CodeStr; 
    string imgURL = !IsPDF ? resURL : Url.Content("~/Content/Images/pdf.png"); 
    string target = !IsPDF ? "" : " onClick=\"window.open('" + resURL + "', '_blank')\""; // SO : 13335954 
} 

<a href="@resURL" @Html.Raw(target) title="@item.FileName @item.FileTypeTitle"> 
    <img src="@imgURL" width="150px" alt="@item.Comment" /> 
</a> 
</span> 

Код специфичен для моего приложения выше в синтаксисе Razor (надеюсь, не трудно сделать вывод). Дайте мне знать, если у кого-то есть лучшее решение.