IT_Programming/HTML&CSS

[Tip] 웹 브라우저에서 pdf 파일 보기

JJun ™ 2010. 12. 18. 23:28


 

<iframe src="http://test.co.kr/a.pdf  " wdith="가로길이" height="세로길이"></iframe>

 


 

 

Adobe Reader의 웹브라우저 플러그인은 PDF 파일 전체를 다운로드하지 않고 일부만 먼저 다운로드하여

보여주는 기능이 있다. 이것은 HTTP 1.1 규격의 Byterange Request를 이용하여 파일의 특정 영역만

다운로드할 수 있기 때문인데, Adobe Reader의 버전에 따라 혹은 웹서버의 버전에 따라 꼬이는 경우가 있다.


필자의 경우 Windows Vista x64에서 Firefox 2.0 및 Internet Explore 7.0 환경에 Adobe Reader 8.1를

설치하였는데, 몇몇 사이트에서는 PDF 파일이 잘 보이는 반면 다른 몇몇 사이트에서는 계속 백지로

나타나는 현상이 발생했다. Firefox의 확장 기능인 Live HTTP Header로 분석한 결과 PDF 파일이 나오지

않는 사이트에서는 206 Partial Content라는 response가 나타남을 알 수 있었고 이를 조사한 결과

위와 같은 결론을 얻게 된 것이다.


용량이 큰 PDF 파일을 서비스할 때는 전체 다운로드를 하여야 하므로 조금 불편할 수 있겠으나

아예 안 보이는 상황보다는 낫다고 판단, 다음과 같은 Apache 설정을 추가하였다.

  1. <FilesMatch "\.pdf$">
        Header unset Accept-Ranges
        RequestHeader unset Range
        RequestHeader unset If-Range
        RequestHeader unset Unless-Modified-Since
        Header append Content-Disposition "filename: x.pdf"
    </FilesMatch>

(위 코드는 mod_headers 모듈이 활성화되어 있어야 작동한다.)


이 문제는 lighttpd에서도 보고되어 있고 비슷한 방법으로 해결한다.

 


 

 

Acrobat in the Browser

If you've ever had the need to determine what version of the Acrobat Browser Plugin your web visitors are using then perhaps we can shed some light on how to find this information.

 

Using some simple JavaScript, it's possible to determine a whole range of version information from the PDF Viewing Component inside a Web Browser.

 

As the ActiveX Control (pdf.ocx) is undocumented and unsupported by Adobe Tech Support, programming with it can be wasted effort.

 

The other thing to note is that Internet Explorer and Netscape Navigator provide this information in two totally different ways -- surprise, surprise ;)

 

 

Internet Explorer

To find out the version of Acrobat being used inside Internet Explorer we need to create an Object

from the 'pdf.ocx' ActiveX control.

 

To accomplish this we need to know the Class ID of the Object we are to embed. Using Microsoft's ActiveX Control Pad you can easily do this (see references at the bottom of the page).

 

Alternatively you can look in the registry against the PDF.PdfCtrl.6 entry (CLSID).

 

The Class ID for the pdf.ocx for Acrobat 5/6 is:

CA8A9780-280D-11CF-A24D-444553540000

 

The ClassID for earlier versions may be the same, but as I no longer have these version installed I'm unable to find this out.

In a normal HTML page we add the following Tag:

<object id="Pdf1" 
  classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" 
  width="0" 
  height="0">

I generally put these right after the BODY tag so they are processed first as the browser parses the HTML.

<code>
      <html>
            <body>
                  <object id="Pdf1"
                    classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
                    width="0" height="0">
            </body>
      </html>
</code>

 

Once the page is processed you will have a reference to the ActiveX Control (pdf.ocx) by using the object name 'Pdf1'.

 

By using some JavaScript we can get access to the Version information contained inside the object. The code section at the bottom of this article details the JavaScript I've used.

 

In brief we basically ask the 'Pdf1' object to give us a list of the version numbers (GetVersions()),

we can then do a quick check to see if this information has the numbers 6.0.0 or 5.0.0 (an also the updaters (5.0.5 and 6.0.1).

 

That code could be as simple as:

if(Pdf1.GetVersions().indexOf("6.0") != -1)
    alert!!!("Acrobat 6 Found")

 

Netscape Navigator

As I mentioned before NN has a different approach when it comes to plugins.

There's an object in Netscape to provide access to plugins, it works like this:

var pluginName = navigator.plugins["Adobe Acrobat"].description;
if(pluginName.indexOf("6") != -1) 
    alert!!!("Acrobat 6 Found")

 

Because there's no ActiveX object to reference we can simply put this code (and obviously more)

into a function and call it from an onLoad or onClick event handler.

 

 

 


 

 

1. <embed src="FullScreenEmbed.pdf" width="500" height="375">

 

 

 

2. <embed src="FullScreenEmbed.pdf#toolbar=0&navpanes=0&scrollbar=0" width="500" height="375">

 

 

 

3. <embed src="FullScreenEmbed.pdf" width="500" height="375"/>

 

 

 

 


 

 


pdf파일을 브라우저에서 뜨지 않게 하기.

adobe의 pdf 형식으로 된 파일은 만든 환경과 읽는 환경에 상관없이 만든 사람이 의도한대로 문서를

보여주기 때문에 널리 쓰이고 있다. 문서를 만드는 프로그램은 유료지만 보는 프로그램인 아크로뱃 리더는

무료로 배포하고 있지만 아크로뱃리더가 가벼운 프로그램이 아니라서 가뿐한 Foxit PDF Reader를 사용하고 있다.

 

웹사용성 전문가인 제이콥닐슨이 지난 8월말에 쓴 Open New Windows for PDF and other Non-Web Documents 에서 PDF문서를 띄울때는 다른 일반적인 html 문서 링크와는 다르게 새창에서 띄울 것을

제안하였고 아예 브라우저에서 pdf문서를 바로 읽어오지 않도록 하는 것을 최선의 방법으로 추천하였다.

 

아크로뱃 리더를 설치하면 인터넷익스플로러 및 파이어폭스 안에서 바로 리더기가 플러그인처럼 뜨면서

pdf문서를 브라우저 안에서 불러온다. 제이콥닐슨이 테스트 해본 결과 사람들은 pdf문서가 브라우저 안에서 뜨면 문서를 다 읽고난 다음에 Back 버튼을 누르는게 아니라 브라우저를 닫아버리는 경우가 많다고 한다.

(Foxit 리더기는 브라우저 안에서 뜨지 않는데 오히려 이것이 내가 Foxit을 쓰는 이유이기도 하다.)

 

사용자쪽에서 클릭할때 “다른이름으로 대상저장”을 하거나 아크로뱃리더가 아닌 리더기를 쓰기를 바랄 것이

아니라 아예 서버쪽에서 pdf파일을 보낼때 브라우저에서 뜨게 하지 않고 다운받기 대화창이 나오게 함으로써

다운받는 사람이 pdf파일을 지금 읽을 것인지 아니면 나중에 읽을 것인지에 대한 결정권을 줄 수 있다.

 

Offerring PDFs that download 에서는 pdf문서를 올려둔 서버 이용자가 할 수 있는 방법을 소개하고 있는데

일반적인 웹호스팅 이용자가 할 수 있는 방법은 두가지다.

 

 

첫번째는 pdf파일이 있는 디렉토리 안에 .htacces 파일을 만들고 아래와 같은 내용을 써 넣는다.

 

[On Apache 2]

SetEnvIf Request_URI "\.pdf$" requested_pdf=pdf

Header add Content-Disposition "Attachment" env=requested_pdf

 

or

 

[On Apache 1.3]

<FilesMatch "\.pdf$"> Header add Content-Disposition "attachment" </FilesMatch>  

 

그러나 이 방법은 웹서버로 쓰는 아파치서버의 버젼이 2 이상이어야 하는 조건이 있다.

지금 내가 쓰고 있는 서버는 1.3대 버젼이어서 이 방법이 통하지 않았다.

 

 

두번째 방법은 php 파일을 한번 거치도록 하는 것이다.

 

아래와 같은 내용을 적은 php 파일 (예를 들면 pdf.php)을 만든다.

 

<?php

   $pdf = $_SERVER['PATH_INFO'];

   

   if(preg_match('/^\/[a-zA-Z0-9_\-]+.pdf$/', $pdf) == 0) {
      print "Illegal name: $pdf";
      return;
   }

   

   header('Content-type: application/pdf');
   header('Content-disposition: Attachment');
   readfile('path_to_pdfs' . $pdf);
?>

 

그리고 다운받을 pdf파일을, 이 php파일 뒤에 /파일이름으로 붙여준다.

예를 들자면 http://서버주소/pdf.php/sample.pdf