Skip to content

Word,PPT 文档预览js组件(图片预览js组件)

Notifications You must be signed in to change notification settings

lancezhcj/MPreview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

5 Commits

Repository files navigation

MPreview.js

Word,PPT 文档预览组件(图片预览组件)

移动端请移步 MPreview.mobile

Demo参考

http://demo.webjyh.com/MPreview/

特此说明

此插件是我在项目开发中而制作,其只适用于其项目,如须使用须注意,提供的图片须有较大的宽高。

插件说明

  1. 此插件需要由服务端提供转换好的Word图片或PPT图片来进行预览。
  2. 插件需要 jQuery1.9+ 库。支持IE7+,FireFox,Chrome。
  3. 初始化调用插件的外容器,只需设置宽高样式即可,无需其它设置。
  4. 因插件是刚开始阶段,一些功能并未能完善全,如:放大,缩小功能。
  5. 插件中一些滚动的计算是硬算出来的(勿喷)。

插件特性

  1. 服务端将全数据返回(图像地址的数组集合),由插件进行分割加载。
  2. 支持滚动条拖拽滚动及全屏预览。
  3. 支持上一页,下一页功能。

目录结构说明

MPreview/ ├── css/ │ ├── base.css (重置样式) │ └── MPreview.css (插件所需样式) ├── images/ │ ├── loading.gif (加载图片等待动画) │ └── media_icon.png (插件所需的icon) ├── js/ │ ├── MPreview.js (Word版 js) │ └── MPreviewPPT.js (PPT版 js) ├── upload/ │ ├── MPreview_DOC_1.jpg (测试图片) │ └── MPreview_PPT_1.jpg ├── api.php (数据请求的演示地址) ├── data.json (请求所返回的数据格式) ├── index.html (Word版 Demo) └── PPT.html (PPT版 Demo) PS: 务必一次性返回所有图片地址,插件将自动分割加载 

如何使用

<!-- require css --><linkrel="stylesheet" href="css/MPreview.css"><!-- require js --><scripttype="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript" src="js/MPreview.js"></script><!-- html --><divclass="doc" id="doc"></div><scripttype="text/javascript">$('#doc').MPreview({url: 'api.php?action=doc&callback=?'});</script>

MPreview.js (Word 版) 参数说明

$('#doc').MPreview({url: 'api.php?action=doc&callback=?',//url中包含callback则表示跨越请求,具体可参考$.getJSON();data: null,//包含所有图片地址的数组,如填写则不发送Ajax。用于直接传入数据,方便调用。offset: 100,//每次滚动偏移多少像素,默认 100pxloadSize: 5,//每次加载几张图片pageFix: 50,//当前页数判定的衡量标准scrollFix: 5,//当前默认滚动条距离外容器的边距minScrollHeight: 20//当前滚动条按钮最小高度});//关于 data 参数的用法vardata=['upload/1.jpg','upload/2.jpg','upload/3.jpg'];$('#doc').MPreview({data: data});

MPreviewPPT.js (PPT 版) 参数说明

$('#ppt').MPreviewPPT({url: 'api.php?action=doc&callback=?',//url中包含callback则表示跨越请求,具体可参考$.getJSON();data: null,//包含所有图片地址的数组,如填写则不发送Ajax。用于直接传入数据,方便调用。loadSize: 5,//每次加载几张图片scrollFix: 5,//当前默认滚动条距离外容器的边距minScrollHeight: 20//当前滚动条按钮最小高度});//关于 data 参数的用法vardata=['upload/1.jpg','upload/2.jpg','upload/3.jpg'];$('#ppt').MPreviewPPT({data: data});

联系作者

Blog:http://webjyh.com Weibo:http://weibo.com/webjyh/

About

Word,PPT 文档预览js组件(图片预览js组件)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript81.0%
  • CSS14.4%
  • PHP2.3%
  • HTML2.3%