Word,PPT 文档预览js组件(图片预览js组件)
JavaScript CSS PHP HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
upload
PPT.html
README.md
api.php
data.json
index.html

README.md

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 -->
<link rel="stylesheet" href="css/MPreview.css">

<!-- require js -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/MPreview.js"></script>

<!-- html -->
<div class="doc" id="doc"></div>
<script type="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,                            //每次滚动偏移多少像素,默认 100px
	loadSize: 5,                            //每次加载几张图片
	pageFix: 50,                            //当前页数判定的衡量标准
	scrollFix: 5,                           //当前默认滚动条距离外容器的边距
	minScrollHeight: 20                     //当前滚动条按钮最小高度
});

//关于 data 参数的用法
var data = ['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 参数的用法
var data = ['upload/1.jpg','upload/2.jpg','upload/3.jpg'];
$('#ppt').MPreviewPPT({ data: data });

联系作者

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