html在线查看pdf源码,viewerjs 在html打开图片或打开pdf文件使用案例(示例代码)

开发者常用到在线访问pdf,txt,浏览图片的插件,这里推荐viewer.js这个插件,简单好用。它的核心亮点就是查看图片和pdf功能。老早以前就用过的,昨天一个小伙伴问我Android开发在线浏览pdf怎么弄?我一下想到这个插件,帮人搞出来了,感觉这个还是得总结一下才好,不然觉得简单又容易忘记。1.使用viewerjs浏览图片使用前需要先引入:css.js其次简单使用代码如下:单个图片就用图片元...
摘要由CSDN通过智能技术生成

开发者常用到在线访问pdf,txt,浏览图片的插件,这里推荐viewer.js这个插件,简单好用。它的核心亮点就是查看图片和pdf功能。老早以前就用过的,昨天一个小伙伴问我Android开发在线浏览pdf怎么弄?我一下想到这个插件,帮人搞出来了,感觉这个还是得总结一下才好,不然觉得简单又容易忘记。

1.使用viewerjs浏览图片

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

其次简单使用代码如下:单个图片就用图片元素new 一个viewer就可以了;批量多个的图片的管理可以直接给父元素new 一个Viewer对象;

单张图片:
多个图片:

01

02

03

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

如图:

a32bfffe8eff40629d3e1ba68a47eaf8.jpg

2.使用viewerjs浏览pdf

a.需要下载viewer.js文件,放在服务器根目录下,官网下载如下:https://viewerjs.org/

注意标红的文字哈,如你项目名称是“mobei”,则这个PDF文件路径: mobei/PDF。 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML实现在线图片查看器的示例代码。它使用了jQuery和fancybox库来实现图片的放大缩小和下载功能。 ```html <!DOCTYPE html> <html> <head> <title>在线图片查看器</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css"> <style> .gallery { display: flex; flex-wrap: wrap; justify-content: center; } .gallery img { margin: 10px; max-width: 200px; cursor: pointer; } </style> </head> <body> <div class="gallery"> <img src="https://picsum.photos/id/1/200/200" data-src="https://picsum.photos/id/1/800/800" alt="图片1"> <img src="https://picsum.photos/id/2/200/200" data-src="https://picsum.photos/id/2/800/800" alt="图片2"> <img src="https://picsum.photos/id/3/200/200" data-src="https://picsum.photos/id/3/800/800" alt="图片3"> <img src="https://picsum.photos/id/4/200/200" data-src="https://picsum.photos/id/4/800/800" alt="图片4"> <img src="https://picsum.photos/id/5/200/200" data-src="https://picsum.photos/id/5/800/800" alt="图片5"> </div> <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script> <script> $(document).ready(function() { $('.gallery img').click(function() { var src = $(this).data('src'); $.fancybox.open({ src: src, type: 'image', buttons: [ 'zoom', 'slideShow', 'fullScreen', 'download', 'thumbs', 'close' ] }); }); }); </script> </body> </html> ``` 这段代码中,我们首先定义了一个名为“gallery”的div容器,其中包含了5张图片,每张图片都有一个原始的低分辨率版本和一个高分辨率版本,高分辨率版本的地址保存在“data-src”属性中。 接下来,我们引入了jQuery和fancybox库,并使用jQuery选择器来获取所有的图片元素,并为它们添加一个点击事件。当用户点击图片时,我们使用fancybox库打开它的高分辨率版本,并启用了放大、缩小、下载等功能按钮。 需要注意的是,由于fancybox库需要从远程服务器加载相关资源,所以我们在代码使用了CDN来加载这些资源,以提高页面加载速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值