----------
2022년 05월 03일 오전 10시에 코드를 수정하였습니다.
첨부파일은 상관이 없고
이전 코드는 뷰페이지에서는 자동링크가 걸려서 기능이 원활하지 못하네요.
----------
1. 첨부파일을 다운로드 받아 압축을 풀고 pdf 폴더를 그누의 plugin 디렉토리로 업로드 합니다.
시간이 약간 걸립니다.
----------
2. extend 폴더의 user.config.php 의 적당위치에 아래의 코드를 입력합니다.
[code]
<?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 } ?>
[/code]
----------
3. 그누의 문서는 어떤 문서라도
common.php 가 인클루드 되어 있으면 아래의 코드로 pdf 가 보여집니다.
그리고 그 숫자는 몇개가 되어도 상관이 없습니다.
<div class="pdf-div" title="pdf경로">120</div>
여기서 pdf경로는 동일계정의 주소라야 하며
120 은 가로 길이에 대한 세로의 퍼센테이지입니다.
----------
4. 에디터 글쓰기시에는 다른부분은 관게가 없지만
pdf 코드를 작성할 때는 반드시 HTML 모드로 작성해야 합니다.
그리고 그 이후 다시 에디터모드로 돌아가면 되겠지요.
----------
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/ 많은 이들이 사용하고 있는 오픈소스롤 활용하였습니다.
댓글 38개
서울시청에서 동일한 뷰어로 사용하고 있습니다.
한글파일도 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
사용 예시
[code]
<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>
[/code]
유료업체 가격 : http://viewstory.ubstory.net/content/contents.do?cid=2015052020525481535&menuId=75
게시글 목록
| 번호 | 제목 |
|---|---|
| 14082 | |
| 14058 | |
| 14056 | |
| 14047 | |
| 14035 | |
| 14026 | |
| 14019 | |
| 14012 | |
| 13997 | |
| 13988 | |
| 13975 | |
| 13969 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기