그누보드 게시판에서 PDF 파일 출력하기 (PDF.js)

 

얼마 전에 웹 PDF 뷰어 관련 포스팅을 했었습니다.

2020.11.07 - [웹 개발 & 정보/기타] - 웹페이지에서 PDF 파일 보여주기 (PDF 뷰어 넣기)

이것을 응용하여 그누보드 basic 게시판 스킨에 적용해보았습니다.

게시판 스킨 파일은 포스팅 최하단에 첨부되어있습니다.

 

그누보드 5.4.3 버전, 기본 테마에서 작업했습니다.

PDF 뷰어는 PDF.js(mozilla.github.io/pdf.js/)가 사용되었습니다.

PC, 모바일 둘 다 적용되었습니다.

IE는 11버전 이상만, 사파리 브라우저는 지원되지 않습니다.

지원 안되는 브라우저 대응 작업은 필요시 따로 하시면 되겠습니다.

 

 

1. 게시판 목록

각 게시물에 PDF 파일이 있는지 체크하여 PDF 아이콘을 출력합니다.

PDF 파일이 첨부되어있다는 것을 표시해주는 용도입니다.

아이콘을 클릭하면 새창으로 뷰어를 띄우는 기능까지 넣을까 고민했으나, 소스가 복잡해지고 딱히 필요 있을까 생각되어 아이콘만 출력했습니다.

list.skin.php 파일

<?php 
// pdf 파일이 있는지 체크 
$chk_wr_file_pdf = sql_fetch(" select count(bf_source) as cnt from `g5_board_file` where bo_table = '{$bo_table}' and wr_id = '{$list[$i]['wr_id']}' and substr(bf_source, -4) = '.pdf' "); 
?> 
<?php if ($chk_wr_file_pdf['cnt']) { ?> 
<span class="icon_view_pdf">PDF</span> 
<?php } ?>

해당 부분 소스입니다.

 

 

2. 게시글 보기

원래 첨부파일 다운로드 버튼이 출력되는 부분 위에 PDF 뷰어를 출력했습니다.

첨부파일이 2개 이상일 때는

PDF 출력

다운로드 버튼

PDF 출력

다운로드 버튼

.

.

.

이런식으로 순차적으로 출력됩니다.

 

view.skin.php 파일

<?php
// pdf 파일 체크 후 pdf 파일이 존재하면 뷰어로 출력
$view_file_ext = substr(strrchr($view['file'][$i]['file'], '.'), 1); // $view['file'][$i]['source']로 해도 될듯
if ($view_file_ext == "pdf") {
    echo "<iframe class='bo_v_pdf_viewer' src='".$board_skin_url."/pdfjs/web/viewer.html?file=".$view['file'][$i]['path']."/".$view['file'][$i]['file']."'></iframe>";
}
?>

해당 부분 소스입니다.

이 부분은 첨부파일을 체크하는 for문 안에 들어있으니 수정 시 주의하십시오.

 

디자인 수정이 필요하시면 게시판 스킨 파일 폴더 내 style.css 파일 최하단에서 하시면 됩니다.

style.css 파일

/* 리스트에서 pdf 파일 있으면 아이콘 출력 */
#bo_list .icon_view_pdf {}
 
/* pdf.js로 pdf파일 출력 */
#bo_v .bo_v_pdf_viewer {}

 

게시판 스킨 파일 첨부

그누보드 basic 게시판 pdf 뷰어 적용.zip

7.78MB

 

지원 안되는 브라우저 대응이나 기타 커스터마이징이 필요하다면 안내해드린 소스 부분에 추가 작업하셔서 사용하시면 되겠습니다.

별 것 아닌 소스이지만 무단 배포는 삼가해주시고 퍼가실 땐 출처만 남겨주세요.

※ 데모 : http://sterster3832.iwinv.net/bbs/board.php?bo_table=pdf_ppt

 

- 같이 보면 좋은 포스팅 추천

2020.11.07 - [웹 개발 & 정보/기타] - 웹페이지에서 PDF 파일 보여주기 (PDF 뷰어 넣기)

2020.11.12 - [웹 개발 & 정보/그누보드] - 그누보드 게시판 이미지 업로드시 워터마크 삽입하기