JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2016.11.29 / 24:40

PPT, PDF preview, gdocsViewer

기리아빠
추천 수 369

ppt나 pdf 미리보기 기능을 구현하기 위해 검색 중 gdocsViewer.js를 찾아냈다-
ppt와 pdf 뿐만 아니라 tiff, pps, doc, docx 까지 미리보기 기능을 제공한다-

사용법 또한 간단하다-

1. gdocsViewer.js 파일을 넣는다-

1
<script type="text/javascript" src="/resources/js/jquery.gdocsviewer.min.js"></script>



2. 다음을 스크립트에 추가한다-

1
2
3
4
$(document).ready(function() {
	$('a.embed').gdocsViewer({width: 480, height: 350});
	$('#embedURL').gdocsViewer();
}



3. 사용한다-

1
<a href="www.snee.com/xml/xslt/sample.doc" class="embed" style="text-align : center; display : block;">PDF test georgetown.edu</a>


jQuery plugin that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.

The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Usage

  1. Add jQuery and the gDocsViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js">script>
<script type="text/javascript" src="jquery.gdocsviewer.min.js">script>
head>
  1. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download filea>
<a href="urltofile.pdf" id="embedURL">Download filea>
  1. Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').gdocsViewer();
$('#embedURL').gdocsViewer();

Customization

The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized. 1. $('a.embed').gdocsViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.

Demo

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.