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,770 / 50 Page
    [ dsm 6.1 에서 6.1.1로 업그래이드 하고 부팅 불가능.,..복구대응 .재설치 진행 방법 ]

    dsm 6.1 에서 6.1.1로 업그래이드 하고 부팅 불가능.,...2개의 시놀로지 사용중입니다 1개 는 보이는데 ( ds3615는 업데이트 하…

    [ u5 atv8업데이트후 설정.....진행하다 포기,,,,,atv7의 20181201버전으로 롤백 ]

    U5pvr Atv8로 재설치 5시간이상 경과 이상없습니다저의 설치조건는Linux internal 설치후 (Aolupdate 별도진행)Pooq t…

    [ CoreELEC IR remote LGUplus 4k 전면부 리모컨 스캔 scan code 값 설정 ] 댓글 8

    CoreELEC IR remote LGUplus 4k 전면부 리모컨 스캔 scan code 값 설정모든 키를 아래와 같이 정의 합니다전면부 bt…

    [ 완벽정리! XPEnology를 Hyper-V에 설치하기 | 익스트림 매뉴얼 ] 댓글 10

    완벽정리! XPEnology를 Hyper-V에 설치하기 | 익스트림 매뉴얼extrememanual.net/2823저장된페이지2015. 11. 2…

    [ vmware workstation 에서 리눅스 3Tb 4TB RDM 적용 /하드인식을 위한 자료모음 ] 댓글 5

    RDM 설정 방법1. ESXi Server에 SSH로 접속 로그인 후2. 아래 명령을 입력하여 RDM으로 연결하려는 디스크의 이름을 찾습니다.#…

    [ u5pvr사용기)설정 초기화 진행 설치 환경내용 저장 내용 입니다 ] 댓글 1

    hdd 초기화 포멧후 환경 공장 초기화 진행후 저의 설치 설정값 저장 내용입니다.본문수정업) 몇가지 문제 해결 했습니다조건은 모르나 먼저>…

    [ 시놀로지 알림 이메일 설정 테스트 서버 점검 ]

    시놀로지 알림 이메일 설정 테스트나스 이메일 계정 shimss@11q.kr아래와 같이 이메일 테스트 이상 없음설정참고로 그누보드 메일인증을 위한…

    [ bee-link gt-mini 2g 제품 netflix key 등록하기 ] 댓글 13

    bee-link gt-mini 2g 제품 netflix key 등록하기https://m.cafe.naver.com/mk802/33978에서 파일…

    [ 작업중_실패)PDF를 웹으로 볼수 있는 Google Docs Viewer plugin for jQuery … ] 댓글 14

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

    [ Coreelec 의 IPTV m3u 채널 시청을 위한 TVheadend 서버 설치 설정 값 저장 ]

    Coreelec 의 TVheadend 서버 설치 설정 값 저장설정값을 저장 보관 합니다Coreelec addon 에서 설정 조건1) Tvhead…

    [ u5pvr의 자체epg생성하여 시놀서버에 다운로드및 시놀도커 epg 를 웹서버에 복사하기 ]

    u5pvr의 자체epg생성하여 내부ip의 iptv에서 xmltv.xml를 사용못해 시놀로지로 서버로 다운로드 하여iptv에서 epg정보 불러오기…

    [ gnuboard 에서 summernote 에디터 사용 autosave 적용하기 ]

    그누보드5 팁자료실gnuboard 에서 summernote 에디터 사용 autosave 적용하기gnuboard 에서 summernote 에디터 …

    [ 예약 스킨 ]

    .\r\n----------------------------------------------\r\nHomepc.11q.kr\r\n========…

    [ ●ESXi작업) 호스트 구성을 백업 및 복원하는 방법(2042141) ]

    ●ESXi작업) 호스트 구성을 백업 및 복원하는 방법(2042141)https://kb.vmware.com/s/article/2042141[ro…

    [ 내장 하드 드라이브를 esata 하드 드라이브로 보는 Xpenology 문제 수정 ]

    dsm하드웨어 정보 확인 방법 / 내장 하드 드라이브를 esata 하드 드라이브로 보는 Xpenology 문제 수정DS3617xs현재 DSM 버…

    [ 윈도우 최신버전에서 우툰을 설치 할수 있는 정보 및 xpenology DSM 6.1을 Windows… ]

    xpenology Windows 10이 설치된 DSM 6.1 및 bash로 빌드윈도우 최신버전에서 우툰을 설치 할수 있는 정보 입니다그리고 아래…

    [ U5PVR 펨웨어 인터넷 업데이트/재설치 인터널 니눅스 설치후 재설치 합니다. ]

    U5PVR 펨웨어 인터넷 업데이트/재설치 인터널 니눅스 설치후 재설치 합니다.재설치전에home 디랙토리를 백업 해놓으세요< 초기설정>…


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2025-07-06 08:44:31

    오늘의 홈 현황


    • 현재 접속자♨ 609 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 3 명
    • 주간 가입자※ 12 명
    • 오늘 방문자 26,184 명
    • 어제 방문자 91,941 명
    • 최대 방문자 122,350 명
    • 전체 방문자 6,350,546 명
    • 전체 게시물※ 9,029 개
    • 전체 댓글수※ 25,721 개
    • 전체 회원수 11,730 명

    QR코드


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

    알림 0








    최신글↑