[ HOOK ] PDF 플러그인 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

[ HOOK ] PDF 플러그인 정보

[ HOOK ] PDF 플러그인

첨부파일

pdf.zip (4.5M) 137회 다운로드 2023-10-20 13:53:28
테스트한 버전5.5.7
호환 가능 버전5.4버전 이상

본문

----------

 

2022년 05월 03일 오전 10시에 코드를 수정하였습니다.

첨부파일은 상관이 없고

이전 코드는 뷰페이지에서는 자동링크가 걸려서 기능이 원활하지 못하네요.

 

----------

 

1. 첨부파일을 다운로드 받아 압축을 풀고 pdf 폴더를 그누의 plugin 디렉토리로 업로드 합니다.

시간이 약간 걸립니다.

 

----------

 

2. extend 폴더의 user.config.php 의 적당위치에 아래의 코드를 입력합니다.


<?php 
add_event('tail_sub', 'pdf_mode');
function pdf_mode() {
?>
    <style>.pdf-div { height:0px; }</style>
    <script>
    if (document.getElementsByClassName("pdf-div")[0] !== undefined) {
        for (pdfDiv of document.getElementsByClassName("pdf-div")) {
            pdfDiv.heightPercent = pdfDiv.innerHTML.trim();
            pdfDiv.innerHTML = "<iframe style=width:100%;height:100%;display:block;border:none src='<?php echo G5_PLUGIN_URL; ?>/pdf/web/viewer.html?file=" + pdfDiv.title + "'></iframe>";
            pdfDiv.style.height = pdfDiv.offsetWidth * pdfDiv.heightPercent / 100 + "px";
            pdfDiv.removeAttribute("title");
        }
        addEventListener("resize", function() {
            for (pdfDiv of document.getElementsByClassName("pdf-div")) pdfDiv.style.height = pdfDiv.offsetWidth * pdfDiv.heightPercent / 100 + "px";
        } );
    }
    </script>
<?php } ?>

 

----------

 

3. 그누의 문서는 어떤 문서라도

common.php 가 인클루드 되어 있으면 아래의 코드로 pdf 가 보여집니다.

그리고 그 숫자는 몇개가 되어도 상관이 없습니다.

 

<div class="pdf-div" title="pdf경로">120</div>

 

여기서 pdf경로는 동일계정의 주소라야 하며

120 은 가로 길이에 대한 세로의 퍼센테이지입니다.

 

----------

 

4. 에디터 글쓰기시에는 다른부분은 관게가 없지만

pdf 코드를 작성할 때는 반드시 HTML 모드로 작성해야 합니다.

그리고 그 이후 다시 에디터모드로 돌아가면 되겠지요.

 

31832361_1651487740.344.jpg

 

----------

 

5. pdf 경로는 도메인 슬러시 주소로 입력하는 것이 정신건강에 이롭습니다.

1) http...www.my.com/pdf/file.pdf

2) http...my.com/pdf/file.pdf

3) https...www.my.com/pdf/file.pdf

4) https...my.com/pdf/file.pdf

가 아니라 아래처럼요.

<div class="pdf-div" title="/pdf/file.pdf">120</div>

 

----------

 

6. 그누 5.4 이상 테마나 빌더는 배려하지 않았고 모바일에도 그대로 적용됩니다.

https://mozilla.github.io/pdf.js/ 많은 이들이 사용하고 있는 오픈소스롤 활용하였습니다.

추천
22
  • 복사

댓글 전체

예전에는 스킨을 만들고 그 스킨을 써야만 기능이 나타나는 형태로 만들었는데...
요즘 생각해보니 플러그인 형태로 만들면 스킨에 상관없이 더 확장성이 높을 것 같아 이리 만들어 보았습니다.
먼저 감사합니다.  제가 적용해 보니 주소를 모두 입력 해야 읽어 옴니다.  음 맞게 적용이 된건지요.
http://psaikorea.org/bbs/board.php?bo_table=notice&wr_id=29
잘 나오면 성공이지만. www 가 들어가는 주소를 쓸 경우는 pdf 가 먹빡이 되겠죠.

http://www.psaikorea.org/bbs/board.php?bo_table=notice&wr_id=29

그래서
<div class="pdf-div" title="/plugin/pdf/PSAI_KOREA_회원가입_회원조회_사용방법_강사_다이버용.pdf">120</div>
라는 도메인 슬러시 주소를 추천드리는 거에요.
그리고 파일명에 한글 들어가는 건 비추입니다.^^

꼭 http 나 https 를 사용하는 파일을 써야겠다면
www.psaikorea.org 로 들어오는 것을 강제로 psaikorea.org 로 리다이렉트 하는 코드를 홈페이지에 넣어주어야 합니다.
감사합니다! 정말 잘 쓰고 있습니다.개별 게시판 올려주신 것을 쓰다가 플러그인 형태로 올려주신 것을 쓰니 훨씬 더 좋네요. 활용도도 많고요. 감사한 마음으로 잘 쓰겠습니다!
잘 되서 신나서 쓰고 게시글 수정을 잔뜩 해 두었는데 회원가입과 쇼핑몰 주문 등이 따로 되지 않고 있는 것을 발견했습니다 ㅠㅠ 혹시나 하고 extend 폴더 안의 user.config.php에 추가한 코드를 삭제하니까 회원가입 등이 다시 되네요. 나리야 빌더를 쓰고 있어서 순정 그누가 아니라 맞지 않는 부분이 있는 것 같습니다 ㅠㅠ 많이 아쉽네요.

혹시나

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가;

에서 요거보다 위에 붙이면 되는게 맞을까요?

에구... 딱 보기도 좋고 마음에 들었는데 작업해 놓은 것 어떻게 고치지 싶네요 ㅎㅎㅎ
암튼 좋은 플러그인 감사합니다. 흑흑
훌륭한 플러그인을 공개해 주셔서 고맙습니다.

사용법에 대해 이해가 부족해서 질문 드립니다.

(잘못된 내용이라 삭제했습니다.)

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

위 방법으로 적용했는데 아래 이미지처럼 나옵니다.

직접 링크를 시켰는데도 안됩니다.

사실 file.pdf 파일이 어떻게 만들어 지는지 궁금합니다.
글작성을 하면 자동으로 생성되는 게 맞죠?
아~~~ 해결했습니다.

제가 정확한 기능을 몰랐네요.
저는 글쓰기를 하면 작성된 내용을 pdf로 보여주는걸로 이해했습니다.
그게 아니고 임의의 디렉토리에 올려 놓은 pdf 파일을 내용보기에서 보여주는 기능이군요.

제 생각이 짧았습니다.
회원가입시 자동등록방지 숫자가 안 나오는 현상이 있네요.



저는 extend 디렉토리에 user.config.php에 소스내용 추가하지 않고 user.extend.php을 만들어 적용해서 해결했습니다.

서울시청에서 동일한 뷰어로 사용하고 있습니다.

한글파일도 pdf 로 변경하여 위 뷰어로 보이는 방식으로 사용하고 있네요..

 

서울시에서 외주업체를 통해 사용 중인게 동일한 뷰어있네요.

장점은 hwp, 오피스관련하여 pdf 변환한다는 장점..

사용 주소 :  https://housing.seoul.go.kr/site/main/board/news/12110?cp=1&sortOrder=BA_REGDATE&sortDirection=DESC&bcId=news&baNotice=false&baCommSelec=false&baOpenDay=false&baUse=true

 

사용 예시


<div>
 <!-- 바로보기 버튼 -->
 <a href="javascript:void(0);" onclick="previewAjax('파일 실 위치 주소 파일명까지 (ex : sir.kr/data/d/1.pdf)', '파일명(ex:파일이름.pdf')" title="바로보기">
    <img src="https://viewstory.net/resources/preview/image/common/view_icon.png"></a>
 <!-- 바로듣기 버튼 -->
  <a href="javascript:void(0);" onclick="preListen('https://housing.seoul.go.kr/site/main/file/download/uu/7e833d8302164bef8411c31b53b63578', '서울시, 반지하가구 지상층 이주 시 최대 1,440만원 월세 지원.pdf')" title="바로듣기">
< img src="https://viewstory.net/resources/preview/image/common/speaker_icon.png"></a>
</div>
<script>
jQuery(function($){
    
});
//file_url : 파일경로
//file_name: 파일명 - 파일경로에서 파일명을 추출할 수 없는 경우 파일명을 입력해주십시오.
function previewAjax(file_url, file_name) {
    var apiKey = 'MHTEN2A8RCHAOSTZTMT4MQ';
    var cc = 'sg_093';
    var fileUrl = encodeURIComponent(file_url);
    var fileName = encodeURIComponent(file_name);
    window.open('https://seoul.viewstory.net/previewAjax.do?apikey={0}&cc={1}&url={2}&fileName={3}'
                .format(apiKey, cc, fileUrl, fileName),'a', 'width=1200, height=1000, left=100, top=50');}
function preListen(file_url, file_name) {
    var apiKey = 'MHTEN2A8RCHAOSTZTMT4MQ';
    var cc = 'sg_093';
    var fileUrl = encodeURIComponent(file_url);
    var fileName = encodeURIComponent(file_name);
    window.open('https://seoul.viewstory.net/voiceOverAjax.do?apikey={0}&cc={1}&url={2}&fileName={3}'
    .format(apiKey, cc, fileUrl, fileName), 'a', "width=1200, height=1000, left=100, top=50");}

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};
</script>

 

유료업체 가격 : http://viewstory.ubstory.net/content/contents.do?cid=2015052020525481535&menuId=75

© SIRSOFT
현재 페이지 제일 처음으로