웹 개발 & 정보/기타

웹페이지에서 PPT 파일을 출력해보자 (웹 PPT 뷰어)

Rozera 2021. 6. 24. 12:53
반응형

 

웹페이지(html)에, 혹은 내 웹사이트에 PPT 파일 뷰어 기능을 넣고 싶다면 어떻게 해야 할까요?

이번 포스팅에서는 웹페이지에서 PPT 파일을 출력하는 방법을 알아보겠습니다.

웹 개발 관련 커뮤니티를 돌아다니다 발견한 정보인데, 유용한 것 같아서 정리해봤습니다.

해당 방법은 마이크로소프트사의 웹 오피스(파워포인트) 기능 + HTML 아이프레임 태그를 기반으로 동작합니다.

(마이크로소프트 온라인 오피스 사이트에서는 반드시 로그인을 해야 오피스 기능이 사용 가능하나, 해당 포스팅 내용의 웹 PPT 파일 출력은 별도의 과정이 필요 없습니다)

 

정말 쉽습니다.

핵심 소스는 딱 1줄입니다.

1
<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=PPT파일경로" width="800" height="600"></iframe>
cs

https://view.officeapps.live.com/op/embed.aspx?src=PPT파일경로에서

PPT파일경로본인이 PPT 파일을 업로드 한 서버의 경로를 도메인 주소 포함하여 입력.

예시) example.com/file/ppt/sample.pptx

 

- 결과 화면 -

오른쪽 하단의 버튼을 클릭하면 새 창으로 열기가 됩니다.

 

- 새 창으로 열기 화면 -

이 상태에서 오른쪽 상단의 '슬라이드 쇼 시작' 또는 오른쪽 하단의 버튼을 클릭하면 슬라이드 쇼로 전환됩니다.

 

- 슬라이드 쇼 -

웹페이지 상에서 파워포인트 슬라이드 쇼를 하는 것처럼 출력이 가능합니다.

※ PC 브라우저에서는 슬라이드 쇼가 가능하지만, 모바일 브라우저는 슬라이드 쇼 기능이 없는 듯 하니 참고 바랍니다.

 

- 예제 소스 -

(http://sterster3832.iwinv.net/_dev/pdfppt/test.php)

test.php
0.00MB

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
if (isset($_FILES['ppt_file']['name'])) {
 
    // 설정
    $allowed_ext = array('ppt','pptx');
     
    // 변수 정리
    $error = $_FILES['ppt_file']['error'];
    $name = $_FILES['ppt_file']['name'];
    $ext = array_pop(explode('.'$name));
     
    // 오류 확인
    if$error != UPLOAD_ERR_OK ) {
        switch$error ) {
            case UPLOAD_ERR_INI_SIZE:
            case UPLOAD_ERR_FORM_SIZE:
                echo "파일이 너무 큽니다. ($error)";
                break;
            case UPLOAD_ERR_NO_FILE:
                echo "파일이 첨부되지 않았습니다. ($error)";
                break;
            default:
                echo "파일이 제대로 업로드되지 않았습니다. ($error)";
        }
        exit;
    }
     
    // 확장자 확인
    if!in_array($ext$allowed_ext) ) {
        echo "허용되지 않는 확장자입니다.";
        exit;
    }
     
    // 파일 이동
    move_uploaded_file( $_FILES['ppt_file']['tmp_name'], "./$name");
 
    $ppt_path = $_SERVER['HTTP_HOST'].str_replace(basename(__FILE__), ''$_SERVER['REQUEST_URI']).$name;
    $viewer_ppt_url = "https://view.officeapps.live.com/op/embed.aspx?src=".$ppt_path;
 
    echo "<iframe id='viewerIframe' src='"$viewer_ppt_url"' frameborder='0' width='800' height='600'></iframe>";
}
?>
ppt 파일을 업로드하면 웹페이지에서 바로 출력됩니다.
<form method="post" enctype="multipart/form-data">
    <input type="file" name="ppt_file">
    <input type="submit" value="확인">
</form>
cs

php로 간단히 예제를 만들어보았습니다.

input file 태그로 ppt 파일을 업로드하면 파일을 서버에 저장 후, ppt를 웹페이지에서 바로 출력하는 소스입니다.

 

- 예제 소스 파일 업로드 결과 화면 -

 

- 적용 예시 (사이트 게시판) -

 

※ 해당 소스는 크롬, 파이어폭스, 엣지, 익스플로러 11, 각종 모바일 브라우저 등에서 이상 없이 동작합니다.

 

이렇게 웹사이트, 게시판 등에 적용하여, PPT 파일을 바로 웹페이지에 출력시킬 수 있습니다.

이런저런 곳에 활용이 가능하니 유용하게 사용하시기 바랍니다.

 

- 같이 보면 좋은 포스팅 추천

2020.11.07 - [웹 개발 & 정보/기타] - 웹페이지에서 PDF 파일 보여주기 (PDF 뷰어 넣기)

반응형