달력

122024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
TIP 2016. 7. 12. 17:54

<목표> 블로그에 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 문서에다가 적용시켜서, 사용자가 원하는 데로 볼 수 있도록 하고 있습니다. 확실히, 웹 페이지에서 처리하다보니, 속도는 많이 느려지는 단점이 있습니다.


출처 : http://pulsebeat.tistory.com/60#commentlist

Posted by 당구치는 개발자
|