'PRINT'에 해당되는 글 1건

  1. 2011.04.18 티스토리에 인쇄버튼 달기 4
2011. 4. 18. 23:06

티스토리에 글을 인쇄 좀 해볼려고 했는데 찾아 보니 기능 자체가 없네요.
이런... 
왜 없을까요?
아쉬운 마음에 기능을 넣어 봅니다. 

TO DO List
1. 스크립트 생성
2. div에 id 추가
3. 이미지에 이벤트 추가 



1. 스크립트 생성
- 관리자에서 스킨 - HTML/CSS 편집 선택
- skin.html 수정 
<head> 태그 사이에 아래 스크립트 추가 

<script type="text/javascript">
<!-- 

function printArea(pDiv) {

 getObject("printDiv").style.display="inline";

 var temp = getObject(pDiv).innerHTML;

 var tLen1 = temp.indexOf("<div class=\"another_category");

 var tLen2 = temp.indexOf("<DIV class=\"another_category");

 if(tLen1 > -1){

     temp = temp.substring(0, tLen1);    

 }

 if(tLen2 > -1){

     temp = temp.substring(0, tLen2);    

 }

 printIfr.document.open();

 printIfr.document.write(temp);

 printIfr.document.close();

 printIfr.focus();

 printIfr.window.print();

 getObject("printDiv").style.display="none";

}

 

function getObject(objectId) { 

    if(document.getElementById && document.getElementById(objectId)) { 

        return document.getElementById(objectId); 

    } 

    else if (document.all && document.all(objectId)) { 

        return document.all(objectId); 

    } 

    else if (document.layers && document.layers[objectId]) { 

        return document.layers[objectId]; 

    } else { 

        return false; 

    } 

document.write("<div id='printDiv' style=\"display:none\"><iframe id='printIfr' src='' height=5 width=5></iframe></div>");


//]]>

</script>



2. div에 id 추가 
<div class="article"> 이 문자열을 찾으면 두개가 나옵니다. 하나는 공지사항 다른 하나는 본문 글입니다. 
본문 부분을 아래처럼 수정합니다. 


<div class="article" id="articleBody_">
</div><!-- close article -->


위에 처럼 id를 추가해 줍니다. 

3. 이미지를 업로드 하시고 이벤트를 추가합니다.

 <img src="./images/print.gif" onclick="printArea('articleBody_')">


위의 코드는 </div><!-- close entry --> 이걸로 검색해서 바로 위에 넣어 주세요

</div><!-- close comment -->
</s_rp>
<div id="topSign" style="text-align:right;width=660px;padding:10px"><img src="./images/print.gif" onclick="printArea('articleBody_')"> <a href="#top"><img src="http://cfs.tistory.com/custom/blog/7/74610/skin/images/top.gif"></a></div>
</div><!-- close entry -->
</s_article_rep>


모든 작업을 하시기 전에 기존거는 backup 해두세요. 
자칫 복구해야 할 수도 있습니다.

이렇게 작업했는데 원하는 결과가 안 나올 수 있습니다. ^^ 
이점 꼭 알아 주세요.

참고로 테스트는 ie7, 구글 크롬에서 해봤습니다. 


이외에도 화면에 top 버튼 달고 싶다면  위에 처럼 넣어 주시면 됩니다. 


Posted by 까오기