작업중_실패)PDF를 웹으로 볼수 있는 Google Docs Viewer plugin for jQuery 첨부 파일 pc/모바일 모두 pdf보기 가능 > 11.Nas_1

새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사

작업중_실패)PDF를 웹으로 볼수 있는 Google Docs Viewer plugin for jQuery 첨부 파일 pc/모바일 모두 pdf보기 가능

♨ 카랜더 일정 :

링크

http://www.jawish.org/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html 2648

첨부

sample.pdf (56.1K) 1

2018.02.02 01:50

html5_tutorial.pdf (1.7M) 1

2018.02.01 16:38

shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성
223.♡.172.169 아이피
작성일 2018.01.31 14:14

13,463 조회
14 댓글 댓글 14건
목록

글검색

PDF를 웹으로 볼수 있는 Google Docs Viewer plugin for jQuery 첨부 파일 pc/모바일 모두 pdf보기 가능

Google Docs Viewer plugin for jQuery

Here's a little jQuery plugin I wrote recently 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>

</head>

2. 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 file</a>

<a href="urltofile.pdf" id="embedURL">Download file</a>

3. 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.

$('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

- Check out the live demonstration

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.

Download

- jquery.gdocsviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!

This entry was posted by Jaa on Monday, February 21. 2011 at 19:00. You can leave a response, or trackback from your own blog.

Defined tags for this entry: gdocsviewer, google docs viewer, javascript, jquery, plugin, projects, release

Related entries by tags: Dhivehi Phonetic (with Naviyani) Keyboard Installer for Windows Filibari Keyboard for Thaana Moment.

js Dhivehi locale merged Dhist launched! Integrating JTK with tinyMCE 4.x

Email this • Share on Facebook • Digg This! • Save to del.icio.us • AddThis!

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

<head>

<title>gDocsViewer pdf Demo</title>

/* Style the second URL with a red border */

#test-gdocsviewer {

border: 5px red solid;

padding: 20px;

width: 500px;

background: #ccc;

text-align: center;

}

/* Style all gdocsviewer containers */

.gdocsviewer {

margin:10px;

}

</style>

/*<![CDATA[*/

$(document).ready(function() {

$('a.embed').gdocsViewer({width: 400, height: 400});

$('#embedURL').gdocsViewer();

});

/*]]>*/

</script>

</head>

<div>

<a href="<?php echo $view['file'][0]['path'];?>/<?php echo $view['file'][0]['file'];?>" class="embed">gdocsViewer 첨부1 </a>

<a href="<?php echo $view['file'][1]['path'];?>/<?php echo $view['file'][1]['file'];?>" class="embed">gdocsViewer 첨부2 </a>

</div>

</body>

주) 본자료는 시현했으나 저의 시스템 모바일에서 안되서

공부중 입니다

[ 추가 정보 ... 더보기) ]

뷰PDF 1,2

office view

링크

http://www.jawish.org/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html 2648 회 연결
첨부

sample.pdf 파일크기 (56.1K) 1 회 다운로드

등록일 2018.02.02 01:50

html5_tutorial.pdf 파일크기 (1.7M) 1 회 다운로드

등록일 2018.02.01 16:38

댓글목록

shimss11q님의 댓글

shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물

♨ 카랜더 일정 :

작성자 정보

컨텐츠 정보

본문

관련자료

댓글목록

[ 데비안 10 rc.local 추가 파일 생성 실행파일 만들기 ] 댓글 1

[ MiBox3 EddyLab에디션 셋탑 공구 설치 와 adb_scrcpy 화면 미러링 컨트롤 기본 설치 화면캡… ] 댓글 2

[ 재설치) android tv ver 9 termux 설치후 ubuntu 와 s**a2설치 작업 ] 댓글 1

[ ** 시놀로지 도커용 Tvheadend 자동설치 작업 => 도커의 좋은점 바로 삭제후 간단히 재설치 가능 ] 댓글 5

[ ● redpill 부트로더 빌드 7.0.1 추가 \global_config.json ] 댓글 2

나스정보

QR코드