viewerjs open a picture or open the pdf file use cases in html

Developers commonly used to plug online access pdf, txt, browse pictures, recommended here viewer.js this plug-in, easy to use. Its core is the highlight of view pictures and pdf functions. Long ago it used, a junior partner asked me yesterday, Android developers browse online pdf how to get? I thought about this plugin, help people out out, I feel this still have to sum up we go, or feel simple and easy to forget.

1. Use viewerjs browse pictures

Before use need to introduce: css.js

Secondly, simply use the following code: a single picture on a viewer will be able to use new picture elements; a plurality of batches of pictures directly to the parent element management can be a new Viewer objects;

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

Figure:

2. Use viewerjs browse pdf

　　. a viewer.js need to download the file, on the server root directory , the official website to download the following: https://viewerjs.org/

　　Note marked red text Ha, if you project name is "mobei", then the PDF file path: mobei / PDF. Continue below

Access syntax is as follows: https: //169.254.109.160: 8001 / project name /PDF/web/viewer.html?file=https://169.254.109.160:8001/ project name /PDFfile/1.pdf#page=1 "

　　Parameter analysis as follows:
　　https://169.254.109.160:8001/ project name // server root path

　　PDF / web / viewer.html // viewer.html your PDF in the project path

　　file = https: //169.254.109.160: 8001 / project name /PDFfile/1.pdf // file path, attention must be server path can not be a relative file paths

　　# Page = 1 // default jump page can take a few, you can not take this parameter

Iframe support the introduction of the browser is open, as shown:

　　. B Currently Google, 360 browser and other browsers, and advanced ie (this is my ie11), are directly accessible, may achieve the effect that customers want; specifically as shown below:

In addition, if Android development with direct access manner will invoke the browser, the client may be sprayed Oh, so Android to take Viewerjs with iframe calls more perfect way to solve the problem of users online browsing.

Well, for example access to the source code distributed to you the way, I would like to avoid detours.

3. The source code download the attachment, start the server Open PDFfile / ciem_test.html to

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

viewerjs open a picture or open the pdf file use cases in html

Guess you like