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文件，放在服务器根目录下,官网下载如下：ViewerJS Home

　　注意标红的文字哈，如你项目名称是“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

viewerjs 在html打开图片或打开pdf文件使用案例相关推荐

同时打开对比两个pdf文件软件推荐
同时打开对比两个pdf文件同时打开对比两个pdf文件应该是一个比较特别的需求.目前主流的 pdf 查看软件,福昕.adobe.pdf xchange.smartPDF之类都不支持此功能. 我在网上搜 ...
.net core 文件流保存图片_如何将图片打包成PDF文件进行保存？
如何将图片打包成PDF文件进行保存?我们都知道PDF文件是一种电子文档发行和数字化信息传播的理想文档格式,支持跨平台传输.对普通读者而言,用PDF制作的电子书具有纸版书的质感和阅读效果,可以逼真地展现 ...
jpg图片转换成pdf文件，方法步骤
如何把jpg图片转换成pdf文件?近期有不少小伙伴问我,能不能把jpg图片转换成pdf文件,让自己的jpg图片文件能稳定的在不同系统查看使用,这样也就避免了因jpg图片多和格式问题而导致的的打开慢或打 ...
怎么把图片转换成PDF文件？
为什么要把图片转换成PDF文件?很多小伙伴可能在工作中接触到大量的图片,但是在工作中,我们无论是自己查阅.发送给别人还是存档,对于数量过多的图片来说是非常不方便的,如果能将同类型的图片转换成PDF格式 ...
图片怎么转PDF文件？免费图片转PDF方法推荐
图片怎么转PDF文件?我们经常把课堂上或工作中遇到的重要内容拍照记录,但是有时候内容不仅不好查阅,也不好保存,还会因为内存太大占用空间.PDF作为一种版式文档格式,因其兼容跨平台打开.兼容多格式互转. ...
Java 将图片组合成PDF文件
程序界面图: 代码清单: package 将图片组合成PDF文件; import java.awt.event.ActionEvent; import java.awt.event.ActionLis ...
怎么将JPG格式的图片转换成PDF文件？
图片是我们日常分享的一部分,但如果作为正式文件对外发布的话,零散的图片显然是不适合的,那应该怎么办呢?小编觉得将图片转换成PDF文件是非常有必要的,下面小编就把具体的操作步骤教给大家,一定要仔细学习哦 ...
如何把微信中的多个图片转为一个pdf文件？
如何把微信中的多个图片转为一个pdf文件? 1. 用360安全浏览器打开相关微信的连接. 2 浏览相关微信的图片,直至所有的微信图片都能看见 3 点击鼠标右键,点击"全屏查看" ...
如何将JPG图片转换成PDF文件
图片这种文件格式已经不仅仅是在工作中会使用到,作为我们生活中,朋友之间在网络渠道上聊天交流,也会用图片来表达一些情绪,增添聊天中活跃的气氛.虽然很适用于聊天中,但是如果工作中同事之间传送图片文件,会显 ...
如何将spyder打包成exe_如何将图片打包成PDF文件进行保存？
如何将图片打包成PDF文件进行保存?我们都知道PDF文件是一种电子文档发行和数字化信息传播的理想文档格式,支持跨平台传输.对普通读者而言,用PDF制作的电子书具有纸版书的质感和阅读效果,可以逼真地展现 ...

viewerjs 在html打开图片或打开pdf文件使用案例

viewerjs 在html打开图片或打开pdf文件使用案例相关推荐

最新文章

热门文章