多语言展示
当前在线:609今日阅读:100今日分享:18

FlexPaper的使用:[1]简单案例

FlexPaper主要用来在线预览文档。作者有一个项目是在线预览文档,功能与百度文库类似,但是有一个奇葩功能,点击文章章节定位章节位置。如果知道章节在那一页的话实现起来也是比较容易的,但是服务端没有办法提供章节所在页数,这就有难度了。在这篇系列经验中,涉及到一下内容:1. 如何生成swf文档;2. 使用FlexPaper加载swf文档;3. 对FlexPaper进行二次开发的准备;4. 去掉商标;5. 去掉搜索时,如果搜索不到结果时的提示对话框;6. 其他;首先第一篇先简单使用FlexPaper。
工具/原料

FlexPaper 2.2.4

方法/步骤
1

我们从FlexPaper的官网下载控件,进入官网,点击“DOWNLOAD”,然后选择如下图进行下载

2

作者使用的是版本2.2.4,FlexPaper的结构如下图

3

作者是在JavaScript中用到的FlexPaper,实际我们只需要js文件下的flexpaper.js和jquery.min.js,以及FlexPaperViewer.swf,上图已经标明,我们将上面提到的三个文件拷贝到项目中,这里作者的目录有变动,大家可以打开flexpaper.js修改下二图红色标注的地方,只要让flexpaper.js能够找到FlexPaperViewer.swf即可(只需要修改下二图第二个标注即可)

4

在jsp文件中调用FlexPaper,首先引入FlexPaper,如下图一,然后调用FlexPaper,下二图,大家可能看不清,没有关系这篇代码在网上很容易搜的到

5

在调用FlexPaper时,先说几个比较重要的参数,其他的参数以后的经验中再讲,第一个SWFFile,这个是用来指明要显示的swf的位置,Scale,这个是用来指明显示时文章显示的比例,要大于零,多试几次就知道了。如果你能够正常的显示swf文章,那你就太顺利了,如果不能正常显示文章的话,可能原因有:1. swf路径错误;2. FlexPaper控件中路径错误;3. 换FlexPaper自带的paper.swf文件试一下,可能是你自己的swf文件错误

注意事项
1

如果还存在问题,请看作者的下一篇经验

2

不同版本的FlexPaper可能存在差异,不要疑惑,用最新版本就行,功能不会少的

推荐信息