viewerjs 在html打開圖片或打開pdf文件使用案例

開發者常用到在線訪問pdf,txt，瀏覽圖片的插件，這里推薦viewer.js這個插件，簡單好用。它的核心亮點就是查看圖片和pdf功能。老早以前就用過的，昨天一個小伙伴問我Android開發在線瀏覽pdf怎么弄？我一下想到這個插件，幫人搞出來了，感覺這個還是得總結一下才好，不然覺得簡單又容易忘記。

1.使用viewerjs瀏覽圖片

使用前需要先引入：css.js

    <link rel="stylesheet" type="text/css" href="./viewer.min.css" />

   <script src="./viewer.min.js" type="text/javascript" charset="utf-8"></script>

其次簡單使用代碼如下：單個圖片就用圖片元素new 一個viewer就可以了；批量多個的圖片的管理可以直接給父元素new 一個Viewer對象；

           <div>
                 單張圖片:<img src="./a3.png" class="difimg" id="dimg">
            </div>
            <div>
            多個圖片:
                 <ul id="images">
                    <li><img src="./a4.png" class="difimg" ><p> 01</li>
                    <li><img src="./a2.png" class="difimg" ><p> 02</li>
                    <li><img src="./a3.png" class="difimg" ><p> 03</li>
                </ul>
            </div>            

           var viewer = new Viewer(document.getElementById('dimg'));
           var viewer1 = new Viewer(document.getElementById('images'));

如圖：

 2.使用viewerjs瀏覽pdf

　　a.需要下載viewer.js文件，放在服務器根目錄下,官網下載如下：https://viewerjs.org/ 

　　注意標紅的文字哈，如你項目名稱是“mobei”，則這個PDF文件路徑： mobei/PDF。 繼續下文

訪問語法如下：https://169.254.109.160:8001/項目名/PDF/web/viewer.html?file=https://169.254.109.160:8001/項目名/PDFfile/1.pdf#page=1"

　　參數解析如下：
　　https://169.254.109.160:8001/項目名     // 服務器根路徑

　　PDF/web/viewer.html       //你項目路徑下的PDF中的viewer.html

　　file=https://169.254.109.160:8001/項目名/PDFfile/1.pdf    //文件路徑，注意一定是服務器路徑不能是相對文件路徑

　　#page=1    //可以接默認跳轉第幾頁，可以不接這個參數

  支持Iframe引入瀏覽打開,如圖：

　　b.目前 谷歌，360瀏覽器等瀏覽器，以及高級ie(我這是ie11)，都是能直接訪問的，可能達不到客戶想要的效果；具體如下圖所示：

 

 

 

 

另外Android 開發的若用直接訪問的方式會調用瀏覽器，可能被客戶噴哦，所以Android采取Viewerjs用iframe調用方式比較完美解決了用戶在線瀏覽的問題。

好了，舉例的訪問方式源碼發給大家，願大家少走彎路。

3.源碼附件下載，啟動服務器方式打開PDFfile/ciem_test.html即可

https://files.cnblogs.com/files/mobeisanghai/PDF%E4%B8%BE%E4%BE%8B.rar

 屬作者原創，如有轉載，請表明出處：cnblogs.com/mobeisanghai/p/12012525.html