11q.kr 첨부된 자바스크립트 pdf 뷰어 ( pdf.js , pdfobject.js ) 는 pc및 모바일에서 배추스킨에 적용 내용입니다.

첨부내 배추스킨에 view.skin.php을 참조

소스내용을view.skin.php에 적당한 위치에삽입하세요.php

적당한 위치에 추가 합니다

추가 정보및 관련 자료는 제홈피에 2018년02월07일 적용 버전 입니다

https://11q.kr/g5s//bbs/board.php?bo_table=s36&wr_id=105

방법)

1) pdsjs 폴더를 pc/모바일 스킨 디랙토리에 복사

2) view.skin.php의 적당한 위치에 추가 하시면 모두 적용 됩니다

3) https://11q.kr에서_첨부된_PDF_file을_pdfjs,PDF_Object로_볼수_있는_첨부1~2의내용입니다.

  (pdfview_off=배추설정최신글off)/pdfjsviewer0~1.php 내용 표시글 수정

========== view.skin.php 추가 적용 ==========

<!--// 11q.kr 첨부1이 pdf이면 자바스크립트 pdf뷰어( pdf.js , pdfobject.js )연결 view.skin.php 에 아래 삽입 시작입니다 -->

<!-- 첨부1에 pdf가 있으면 뷰 -->

<?php

$filename = $view['file'][0]['file'];

$ext = substr(strrchr($filename,"."),1); //확장자앞 .을 제거하기 위하여 substr()함수를 이용

$ext = strtolower($ext); //확장자를 소문자로 변환

//echo $ext; //출력:pdf0

if($ext=="pdf"){

 include_once($board_skin_path."/pdfjs/pdfjsviewer0.php");

}//else {}

?>

<!-- 첨부2에 pdf가 있으면 뷰 -->

<?php

$filename = $view['file'][1]['file'];

$ext = substr(strrchr($filename,"."),1); //확장자앞 .을 제거하기 위하여 substr()함수를 이용

$ext = strtolower($ext); //확장자를 소문자로 변환

//echo $ext; //출력:pdf1

if($ext=="pdf"){

 include_once($board_skin_path."/pdfjs/pdfjsviewer1.php");

}//else {}

?>

<!--// 11q.kr 첨부1이 pdf이면 자바스크립트 pdf뷰어( pdf.js , pdfobject.js )연결 view.skin.php 에 아래 삽입 추가끝 입니다 -->

<!-- 테스트 잠시 잠금 -->

<?php// include_once($board_skin_path."/pdfjs/pdfjsviewer.php")?>

<?php //include($board_skin_path."/gdocviewer/gdocsviewer.php")?>

=============

pdfjsviewer0.php 내용

=============

<!-- 11q.kr 홈에 첨부된 자바스크립트 pdf 뷰어 ( pdf.js , pdfobject.js ) 시작입니다.-->

<div >

<style type="text/css">

.pdfobject-container {

    width: 100%;

    max-width: 1000px;

    height:800px;

    margin: 2em 0;

}

.pdfobject { border: solid 1px #666; }

#results { padding: 1rem; }

.hidden { display: none; }

.success { color: #4F8A10; background-color: #DFF2BF; }

.fail { color: #D8000C; background-color: #FFBABA; }

</style>

<div id="results" class="hidden"></div>

    <div id="pdf"></div>

<div id="pdf1"></div>

<script src="<?=$board_skin_path?>/pdfjs/PDFObject/pdfobject.min.js"></script>

<!-- w:\g5s\skin\board\miwit303_synology_pdfjs_ pdfobjectjs_11q_kr\pdfjs\PDFObject\pdfobject.min.js -->

<script>

var options = {

    pdfOpenParams: {

        navpanes: 0,

        toolbar: 0,

        statusbar: 0,

        view: "FitV",

        pagemode: "thumbs",

        page: 2

    },

    forcePDFJS: true,

    PDFJS_URL: "<?=$board_skin_path?>/pdfjs/web/viewer.html"

<!-- w:\g5s\skin\board\miwit303_synology_pdfjs_ pdfobjectjs_11q_kr\pdfjs\web\viewer.html -->

};

 var myPDF = PDFObject.embed("<?php echo $view['file'][0]['path'];?>/<?php echo $view['file'][0]['file'];?>", "#pdf", options);

<!-- <?php echo $view['file'][0]['path'];?>/<?php echo $view['file'][0]['file'];?> 는 첨부 1번째 경로및 파일 입니다 그리고 pdf 정의 -->

//var myPDF = PDFObject.embed("<?php echo $view['file'][1]['path'];?>/<?php echo $view['file'][1]['file'];?>", "#pdf1", options); 

<!-- <?php echo $view['file'][1]['path'];?>/<?php echo $view['file'][1]['file'];?> 는 첨부 2번째 경로및 파일 입니다 그리고 pdf1 정의 -->

var el = document.querySelector("#results");

el.setAttribute("class", (myPDF) ? "success" : "fail");

el.innerHTML = (myPDF) ? "☞ 첨부1(0)의 pdf파일 pc/모바일모드에서 볼 수 있는 내용입니다. " : "Uh-oh, the embed didn't work.";

</script>

</div>

//출처: http://nahosung.tistory.com/44 [nahos] 참조- 추가끝 입니다 -->

=============

pdf.js 홈페이지 : http://mozilla.github.io/pdf.js/   pdfjs-1.9.426-dist.zip 다운로드 합니다.
pdfobject 홈페이지 : https://pdfobject.com/  PDFObject-master.zip 다운 로드 합니다.
각각의 홈페이지에서 js 파일이 다운로드 가능하며, 예제도 확인 가능하다.
둘중 하나만 사용해도 pdf뷰어로 사용은 가능하다.
pdfobject는 pdf.js를 사용하지 않으면 익스플로러(ie)에서는 작동이 불가능하다.
https://pdfobject.com/examples/pdfjs-forced.html

------------------------

상기 내용을 모두 적용한
첨부 자료 pdfjs.zip 압축 헤제된 파일을 pdsjs폴더로 스킨 폴더에  업로드 합니다.
그리고아래와  같이 추가 합니다.

pdfview_off=배추설정최신글 건수 off