viewer.js实现图片预览功能_javascript技巧

来源:脚本之家  责任编辑:小易  

pdf.js VS 传统浏览器读取pdf一般来说,PDF档案格式都是在浏览器中由外挂程式来描绘,通常是Adobe自己的PDF reader或来自其他供应商的描绘工具,但这些外挂通常无法充分运用PDF的特点,而且由于含有大量的受信任代码,使得Google Chrome浏览器必须运用SandBox沙箱原理,来检查PDF描绘工具是否遭到未知病毒感染。使用adobe,必须在本地安装软件才能使用,而pdf.js不依赖环境、渲染速度快(测试过,确实很快)、安全性高。pdf.js渲染PDF文件pdf.js渲染PDF文件的流程:Fetch pdf(url/buffer)—>canvas—>渲染如果要深入pdf的渲染,需要去研究pdf.js源代码。pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDoc(url/buffer)将pdf载入html,通过canvas处理,然后渲染pdf文件。网上给出的都是通过url来获取pdf的例子,而我在做项目的时候,后台(python)要求是发pdf的数据流给前台,前台接收pdf的buffer,然后通过pdf.js来渲染。当然最初尝试buffer出现了很多问题,具体问题总结如下:1)如何通过$.ajax接收后台发给前台的buffer数据;2)如何将buffer传给pdf.js来处理(这里我使用了viewer.js,所以需要考虑的是如何将buffer传给viewer.js来处理);3)如何将pdf.js转换成pdf.js可以接收的buffer格式;(对应问题解决见代码注释)注:viewer.js是pdf.js的扩展,其将打印、翻页、缩放等功能进行了实现,且界面非常好看。也就是说如果你引入了viewer.js,pdf的渲染和渲染之后的功能界面都已经帮你实现了,你不用自己去写界面www.zgxue.com防采集请勿采集本网。

viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件:

pageoffice可以在线打开word、excel文档 图片可以使用Viewer.js等开源框架 pdf可以通过swfTools将pdf文件转换成swf格式的文件然后使用FlexPaper在页面上显示

1、css文件:viewer.css

用$.get或$.post不要用$.getJson。因为你返回的只是一个字符串。

2、js文件:viewer.js

直接修改控件的viewer.css或者隐藏自带的导航栏,自定义导航样式,自定义的按钮JS事件调用自带的按钮的JSclick事件即可,注意自定义的class名称不要和自带的名称一样

可以在这里下载

下载后,在html中引入

<link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" /><script src="./viewer.js" type="text/javascript" charset="utf-8"></script>

页面布局

html部分

<div id="imgBox"> <div id="imgBoxItem" class="imglist1"> <img src="image/img-1.jpg" data-imgurl="image/img-1.jpg"> </div> <div id="imgBoxItem" class="imglist2"> <img src="image/img-2.jpg" data-imgurl="image/img-2.jpg"> </div> <div id="imgBoxItem" class="imglist3"> <img src="image/img-3.jpg" data-imgurl="image/img-3.jpg"> </div> <div id="imgBoxItem" class="imglist4"> <img src="image/img-4.jpg" data-imgurl="image/img-4.jpg"> </div></div>

CSS部分:

* { margin: 0; padding: 0; list-style: none; } body { background-color: #f5f5f5; font-family: 'PingFang SC Regular', 'PingFang SC'; width: 100%; min-width: 320px; max-width: 480px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-shadow: none; position: absolute; box-sizing: content-box; word-break: break-all; } #imgBox { width: 92%; margin: 0 auto; margin-top: 10px; display: flex; flex-wrap: wrap; } #imgBoxItem { width: 48%; margin-left: 1%; margin-right: 1%; margin-top: 1%; height: 100px; } #imgBoxItem img { width: 100%; height: 100%; }

JS部分:

<script type="text/javascript"> window.onload = function() { var viewer = new Viewer(document.getElementById('imgBox'), { url: 'data-imgurl' }); }</script>

效果:

预览前:

点击图片预览:

Viewer JS预览pdf文件,其pdf文件只能url地址,不支持获取文件流到客户端,生成blob地址预览。而PDFJS能够支持内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js使用h5实现图片预览功能
  • 简单实现js上传图片预览功能
  • javascript图片预览和上传(兼容ie)
  • angularjs点击图片放大实现上传图片预览
  • js html5拖拽上传图片预览
  • js实现纯前端的图片预览
  • 轻松实现js图片预览功能
  • javascript实现input file上传图片预览效果
  • js实现上传图片预览的方法
  • 上传图片预览js脚本 input file图片预览的实现示例
  • javascript常用对象的方法和属性小结
  • requirejs用法简单示例
  • 使用react-router4.0实现重定向和404功能的方法
  • 详解javascript跨域总结与解决办法
  • 在小程序canvas中使用measuretext的方法示例
  • javascript实现循环广告条效果
  • 浅谈js中stringbuffer类的实现方法及使用
  • javascript高级程序设计(第三版)学习笔记6、7章
  • js实现简洁、全兼容的拖动层实例
  • js实现简易计算器功能
  • js怎么实现将流写成文件实现pdf在线预览
  • 如何创建pdf的buffer,让pdf.js实现预览pdf文件
  • viewer.js动态生成的img 显示不了
  • 如何创建pdf的buffer,让pdf.js实现预览pdf文件
  • java中怎样实现附件在线预览
  • .net mvc 关于把controller里面的图片地址传到viewer并显示出来
  • viewer.js怎样设置底部导航栏大小
  • GIF图片查看器Image Viewer for Windows 7安装出来文件图标怎么修改?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js使用h5实现图片预览功能简单实现js上传图片预览功能javascript图片预览和上传(兼容ie)angularjs点击图片放大实现上传图片预览js html5拖拽上传图片预览js实现纯前端的图片预览轻松实现js图片预览功能javascript实现input file上传图片预览效果js实现上传图片预览的方法上传图片预览js脚本 input file图片预览的实现示例javascript常用对象的方法和属性小结requirejs用法简单示例使用react-router4.0实现重定向和404功能的方法详解javascript跨域总结与解决办法在小程序canvas中使用measuretext的方法示例javascript实现循环广告条效果浅谈js中stringbuffer类的实现方法及使用javascript高级程序设计(第三版)学习笔记6、7章js实现简洁、全兼容的拖动层实例js实现简易计算器功能js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包js/jquery判断dom节点是否存在的简单方法微信小程序实现tab左右切换效果js每隔两秒输出数组中的一项(实例)reactnative踩坑之配置调试端口的解决方法从parcel.js打包出错到选择nvm的全部过程javascript中apply和call方法的作用及区别提高网站性能之 如何对待javascriptjavascript制作的网页侧边弹出框思路及实详解webpack+es6+sass搭建多页面应用js 鼠标事件的抓取
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved