[블로그] 블로그에 PDF 뷰어 넣기

2010.06.21 21:36

 

 

<목표> 블로그에 PDF 뷰어 넣기

 

   블로그에 PDF 뷰어를 넣어, 웹 페이지에서 바로 PDF 파일을 볼 수 있도록 하고 싶습니다. 간단하게 요약하자면, PDF 파일을 웹 서버에 올리고, PDF 파일의 링크 주소만 있으면, 손쉽게 가능합니다. 여기에서는 티스토리에서 PDF 뷰어를 넣는 것을 예제로 하겠습니다.

 

 

 

STEP 1  블로그에 PDF 파일 올리기

 

  PDF 파일을 웹 페이지에서 볼 수 있게 하려면, 일단 PDF 파일이 웹 서버에 올려져 있어야 합니다. PDF 뷰어가 링크를 통해 PDF를 가져오기 때문이지요. 블로그에 파일을 올리는 법은 매우 간단합니다. 매번 하시던 것처럼 파일 첨부를 통해, PDF 파일을 올리시기만 하면 됩니다. 파일을 올리고 나면, 아래와 같은 그림으로 나타납니다.

 

▲ 파일 첨부를 통한 PDF 파일 올리기

 

 

▲ 파일 올리고 난 후

 

 

 

 

 

STEP 2  PDF 파일 링크 찾기

 

   블로그에 PDF 파일을 올리고 난 뒤에는, 이 파일의 주소를 찾아야 합니다. 태크를 통해 PDF 뷰어에 적용시킬려면, PDF 파일 링크 주소를 알아야하기 때문이죠. 오른쪽 상단에 보시면, HTML 란이 있습니다. 이 칸을 체크를 해주시면, 아래와 같이 HTML 코드로 나오게 됩니다. 여기에서 PDF 파일 링크 주소가 있습니다. 아래의 그림에서는 "cfile7.uf@113FFF1f4C2014E26ECSA0.pdf"가 파일의 주소가 됩니다.

 

HTML 을 통해 본 PDF 파일 소스 코드

 

 

 

 

STEP 3  블로그에 PDF 뷰어 넣기

 

  파일의 주소를 찾으셨으면, 이제 PDF 뷰어로 적용시켜야합니다. 아래는 PDF 뷰어를 실행시키는 HTML 코드입니다. HTML 모드에서 아래의 코드를 삽입하시고, 파일 경로 부분에 위에서 찾은 PDF 파일 링크 주소를 넣습니다. width, height를 이용하여, 크기도 자유롭게 조절이 가능합니다.

 

<object type="application/pdf" data="/attachment/파일 경로" width="100%" height="450">

<param name="src" value="/attachment/파일 경로"> </object>

 

 

PDF 뷰어 적용 하기

 

  위의 코드로 적용시키면, 아래의 그림과 같이 웹 페이지에서 바로 PDF파일이 보여집니다.

 

PDF 뷰어 적용 후

 

 

 



<마무리> 
블로그에 PDF 뷰어 넣기

 

  PDF 파일을 직접 웹페이지에서 보면 사용자에게 더욱 쉽게 다가갈 수 있겠죠? 티스토리 블로그를 예로 들어 PDF 뷰어를 웹페이지에서 보여지도록 해보았습니다. PDF 파일을 직접 올리고, 링크 주소를 이용하여, PDF 뷰어를 통해 볼 수 있도록 하였습니다. PDF 뷰어를 찾는 와중에, 여러 PDF 파일을 볼 수 있었습니다. 이제껏 PDF 파일은 단순히 프리젠테이션 자료, 논문 등의 불법 복제를 막기 위한 파일인 줄 알았습니다. 그러나 의외로 3D 뷰어나, 다른 어플리케이션에서 호환 가능한 여러 형태의 문서가 PDF 파일로 이용되고 있었습니다. 위의 예제를 보시면, 3D를 직접 PDF 문서에다가 적용시켜서, 사용자가 원하는 데로 볼 수 있도록 하고 있습니다. 확실히, 웹 페이지에서 처리하다보니, 속도는 많이 느려지는 단점이 있습니다.

 

 

   

[참고자료]  

   

 

Posted by 맥박

       

 

 

맥박 블로그 , , , , ,

  1. Blog Icon

    비밀댓글입니다

  2. 반갑습니다.^^
    다른 웹서버에 있는 PDF 파일도 물론 올릴 수 있습니다.

    <object type="application/pdf" data="/attachment/파일 경로" width="100%" height="450">
    <param name="src" value="/attachment/파일 경로"> </object>

    위의 HTML문에 있는 data와 value 부분에 링크 주소를 넣으면 간단히 해결됩니다.

    예를 들어 설명해드리자면,

    저의 포스팅 중간에 PDF 파일이 있습니다. 마우스 오른쪽 클릭을 하여 주소를 얻으면, 아래와 같은 링크주소가 나타납니다.

    http://pulsebeat.tistory.com/attachment/cfile2.uf@1506E11E4C201CA7A070D5.pdf

    이 주소를 위의 HTML문에 아래와 같이 넣으면,

    <object type="application/pdf" data="http://pulsebeat.tistory.com/attachment/cfile2.uf@1506E11E4C201CA7A070D5.pdf" width="100%" height="450">
    <param name="src" value="http://pulsebeat.tistory.com/attachment/cfile2.uf@1506E11E4C201CA7A070D5.pdf"> </object>

    웹페이지에서 PDF 파일을 출력할 수 있습니다.^^

  3. 좋은정보 감사합니다
    pdf를 삽입했을때 pdf 뷰어의 버튼들이 다 표시가 안되거나
    걸리적거릴 경우가 잦은데

    스크롤바, 툴바, 스태이터스바, 메세지바, 네비게이션패널, 페이지 모드등의 유무를 끄고 켤수 있는 태그는 없을까요?

    http://pdfobject.com
    에서 자바스크립트를 이용한 방법은 찾았는데 제 게시판에서는 먹히질 않아서 질문드립니다.

  4. Blog Icon
    주율

    오 ㅜㅠ
    PDF 파일 어떻게 올려야하나 헤메고 있었는데, 여기 이렇게 답이 있네요 흑흑 ㅜㅠ
    고맙습니다.
    퍼가고 싶은데, 괜찮은지 모르겠네요.

  5. Blog Icon
    장기전세

    스텝2가 안되자나요
    첨부파일에서 html눌러두 링크주소가 안나오자나요
    이거 어케해야하는건지 ㅠㅠ

  6. 감사합니다 요긴하게 사용할 수 있어요 !

  7. 정말 감사합니다!

  8. Blog Icon
    정보 감사합니다.

    참고 합니다. 감사합니다~