11.Nas_1


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


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

♨ 카랜더 일정 :
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    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.

    1.

    <head>

    2.

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

    3.

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

    4.

    </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"

    1.

    <a href="urltofile.pdf" class="embed">Download file</a>

    1.

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

    1.

    $('a.embed').gdocsViewer();

    1.

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


    - 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)

    3232235521_1517405373.3121.png


    <!-- 11q.kr 첨부된 gdocsViewer 영역 시작입니다 20180131-->
    <!-- view.skin.php의 하단 적당한 위치에 소스 복사 및 /mw.js/ 또는 폴더 경로복사 /수정후 jquery.gdocsviewer.min.js 파일 복사 먼저 하세요 -->
    <head>
    <title>gDocsViewer pdf Demo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="<?=$board_skin_path?>/mw.js/jquery.gdocsviewer.min.js"></script> 

    <style type="text/css">
    /* 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>
    <script type="text/javascript"> 
    /*<![CDATA[*/
    $(document).ready(function() {
    $('a.embed').gdocsViewer({width: 400, height: 400});
    $('#embedURL').gdocsViewer();
    });
    /*]]>*/
    </script> 
    </head>
    <body style="background:#999; font-family:arial, helvetica, sans-serif; font-size:14px;">

    <hr size="1" />
    <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>
    </div>
    </body>

    <!-- 11q.kr 첨부된 gdocsViewer 영역 시작입니다 - 추가끝 입니다 -->

    주)  본자료는 시현했으나  저의 시스템  모바일에서  안되서
          공부중 입니다

    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    profile_image

    shimss11q님의 댓글

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

    서버에 파일을 다운로드하기 위해서해야 할 일은 다음과 같습니다.

    https://stackoverflow.com/questions/3938534/download-file-to-server-from-url

    file_put_contents("Tmpfile.zip", file_get_contents("http://someurl/file.zip"));
    단 하나의 문제가 있습니다. 100MB와 같은 큰 파일이 있다면 어떨까요? 그런 다음 메모리가 부족하여 파일을 다운로드 할 수 없습니다.

    내가 원하는 것은 파일을 다운로드 할 때 디스크에 파일을 쓰는 방법입니다. 그렇게하면 메모리 문제가없이 더 큰 파일을 다운로드 할 수 있습니다.

    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.165.174) 작성일
    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.165.174) 작성일
    profile_image

    shimss11q님의 댓글

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

    pc모드 (크롬브라우즈)에서  보이지 않네요

    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.164.233) 작성일
    profile_image

    shimss11q님의 댓글

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

    첨부1의 경로와 파일이름
    <?php echo $view['file'][0]['path'];?>/<?php echo $view['file'][0]['file'];?>

     첨부2의 경로와 파일이름
     <?php echo $view['file'][1]['path'];?>/<?php echo $view['file'][1]['file'];?>


    echo "<a href='{$view[file][$i][path]}/{$view[file][$i][file]}'>";
    이렇게 한번 해보세요..

    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.165.185) 작성일
    profile_image

    돌돌이아빠님의 댓글

    no_profile 돌돌이아빠 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (112.♡.5.46) 작성일

    감사합니다.^^

    profile_image

    shimss11q님의 댓글의 댓글

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

    본자료는  pc 에서는 시현했으나    모바일에서  안되서 공부중 입니다

    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.203.244) 작성일
    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.203.238) 작성일
    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (223.♡.203.238) 작성일
    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (210.♡.41.89) 작성일

    업로드확장자 추출하기
    http://sexy.pe.kr/tc/88

    profile_image

    shimss11q님의 댓글

    shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (210.♡.41.89) 작성일

    첨부파일 시 확장자 체크 (이미지 체크)
    https://sir.kr/g4_tiptech/21438

    목록

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




    Total 1,691 / 16 Page
    [ 자작나스)소음제거 완결판 VR저항 CASE HOLE 추가 / 볼륨저항 500옴 + 100옴 모든팬에 부착 하… ] 댓글 6

    자작나스)소음제거 완결판 / 볼륨저항 500옴 + 100 옴 모든팬에 부착 하니 소음 너무나 조용합니다.아래사진은 볼륨 저항을 부착 팬속도 조정…

    [ Xpenology 헤놀로지 하드 구성과 볼륨 에러 대응 ]

    Xpenology 헤놀로지 하드 구성과 볼륨 에러 대응\r\nw:\html\nas\raid구성에러대응\raid구성_볼륨error대응.html\r…

    [ 2MONS 미니서버 핫스왑*4 USB3.0 case 제품 HDD 인식 불량 문제 해결 ]

    2MONS 미니서버 핫스왑*4 USB3.0 case 제품 HDD 인식 불량 문제 해결문제 발생시 구입처에 연락 하여아래 접촉부에 대한 교체 바랍…

    [ iptime 공유기 a6004ns URL서비스 usb_hdd 중간 폴더 숨기기하여 공개폴더로 이동 패스워드… ] 댓글 6

    iptime 공유기 a6004ns URL서비스 중간 폴더 숨기기하여 공개폴더로 이동 패스워드 만들기간단히 공유 web file 폴더를 만들어 상…

    [ 스팸대응) 메일 릴레이대응 구글링 관련자료 펌업)다른 사람이 내 이메일을 사용하고 있나요? 이메일 스푸핑에… ] 댓글 32

    다른 사람이 내 이메일을 사용하고 있나요? 이메일 스푸핑에 대해 알아보기\r\n\r\n내 계정에서 보낸 것처럼 보이는 메일이 반송되었단 메일을 …

    [ 스마트폰과 시놀로지 나스를 이용해서 CCTV로 사용하는법_사용기 ] 댓글 1

    무료 4000원 투자 하지 않고는 서버시작을 눌러야 하며 구글 화면에서 시놀로지 에서 아래와같이 설정해야 나옴ip:포트확인을 하고 설정( 192…

    [ Synology Assistant 한글 폰트 깨짐 arialuni.ttf 설치로 한글 해결하기. ] 댓글 3

    Synology Assistant 한글 폰트 깨짐 해결하기.출처:http://hobby.tw/430[최신 소식들...]arialuni.ttf한글…

    [ 헤놀로지 하드 HDD 늘리기 하드 갯수 추가하기 설정값 변경 / usb외장을 내장으로 사용 ] 댓글 3

    ===========================주) 하기 수정은 dsm 재설정 되서 초기 설치시 바랍니다.저는 기존 HDD 구성으로 DSM 재…

    [ Malscrmon 0.4 URL 모니터링 ]

    Malscrmon 0.4 URL 모니터링 - Hark의 이것저것 - 티스토리everyhark.tistory.com/1052016. 1. 14. …

    [ SKIPTV 채널정리를 2017년10월26자 정리 해 보았습니다. ] 댓글 19

    저의 최종 iptv 채널리스트 링크 참조 바랍니다IPTV 채널 시청을 위하여SKIPTV 채널정리를 2017년10월26자 정리 해 보았습니다.시청…

    [ u5pvr) linux 펌웨어 20171205 업데이트후 초기화 설정 진행 ] 댓글 1

    u5pvr)linux 펌웨어 업데이트후 초기화 설정 진행사용버전http://cafe.naver.com/mk802/24277- 조건 : linux…

    [ FAT32 간단하게 PartitionGuru_portable 이용 microsd USB FORMAT / 포멧… ] 댓글 1

    FAT32 간단하게 PartitionGuru_portable 이용 microsd USB FORMAT / 포멧 하기단일 파일 로 사용이 편리 합니…

    [ 참조)스마트에디터 모바일에서 사용하기 ]

    적용법]4.3버전까지 패치하신후에사이트/config.php 파일에서define('G5_IS_MOBILE_DHTML_USE', false);를 찾…

    [ ■ ★ u5pvr)tvheadend 의 epg 의 xmltv.xml 를 자동 스케줄러 만들어 사전에 정기적으… ] 댓글 56

    ■u5pvr)tvheadend 의 epg 의 xmltv.xml 를 자동 스케줄러 만들어 사전에 정기적으로 만들어 놓고 tvheadend epg그…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2025-07-16 06:53:18

    오늘의 홈 현황


    • 현재 접속자♨ 607 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 1 명
    • 주간 가입자※ 8 명
    • 오늘 방문자 18,611 명
    • 어제 방문자 56,107 명
    • 최대 방문자 122,350 명
    • 전체 방문자 6,966,093 명
    • 전체 게시물※ 9,038 개
    • 전체 댓글수※ 25,727 개
    • 전체 회원수 11,739 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑