Blueimp 갤러리 PDF 지원

Question

나는 고객의 일부 업로드 된 이미지를 표시 할 수 blueimp 갤러리를 사용하고

가끔

그들은 또한 PDF 파일을 업로드하고 현재 우리가 blueimp 갤러리에서 미리보기 PDF로 좋은 것 동안 수동으로 열 수 있습니다 .

이 문서에서 나는 그 "쉽게"가 다른 콘텐츠 유형 (들)에 지원을 추가 할 수 있습니다 참조 : 아주 약간의 상상력과

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 형식의 m,하지만 그것을 고칠 수있는 방법을 모르겠다

방향을 제안 할 수 있습니까? 감사합니다.

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> 

코드는 위의 면도기 구문 (추측하는 것은 어렵지 않다 희망) 내 응용 프로그램에 따라 다릅니다. 누가 더 나은 해결책을 가지고 있는지 알려주십시오..