FlexPaper的深入了解和应用
作者：tabb_
零下疯度
推荐：无痕客
最近做项目需要用到flexpaper，所以想借此机会好好的研究一下。
这是官方的下载地址：http://flexpaper.devaldi.com/download/，flexpaper是一款付费的软件，它有免费版本但是有限制的（浏览时会显示flexpaper的logo并且限制只能浏览10页）。当然网上有许多破解版本可以使用网上很容易找到。我们公司项目会用到正版但还没有到位，所以本文是以试用版本（有限制的）来研究的。话不多说我们开始。
首先我做的是web项目所以下载时选择ASP.NET/PHP/Java选项
接下来是下载的部分，我们可以看到有PDF2JSON、PDFTk、SWFTOOLS，这三个是PDF文件的转换工具我们一并下载。Zine/Classic是flexpaper的不同版本他们在具体样式上也有所不同，具体的可以在官网的examples上看到。我们这里下载Classic，因为这个版本是可以添加标签和注解的。
下载完我们可以看到它的目录结构，我们需要的是css、js、locale、FlexPaperViewer.swf以及UI_开头的html文件
接下来我们新建一个web项目，把css、images、js、FlexPaperViewer.swf、UI_开头的html导入项目，建立docs和pdf文件夹把转换好的格式文件放进去
至于pdf文件的转换我值写出控制台的命令就不再这里细说了：
pdf转换成单个swf文件
pdf2swf.exe H:\Paper.pdf -o H:\Paper.swf -f -T 9 -t -s storeallcharacters -s linknameurl
pdf按页转换成带页号的swf文件（pdf名_页号.swf）
pdf2swf.exe H:\Paper.pdf -o H:\pages\Paper_%.swf -f -T 9 -t -s storeallcharacters -s linknameurl
pdf转换成单个json文件
pdf2json.exe H:\Paper.pdf -enc UTF-8 -compress H:\Paper.js
pdf按页转换成带页号的js文件（pdf名_页号.js）
pdf2json.exe H:\Paper.pdf -enc UTF-8 -compress -split 28 H:\pages\Paper_%.js
把pdf按页分割
pdftk.exe H:\Paper.pdf burst output H:\pages\Paper_%02d.pdf compress
以上就是转换命令了，只要打开相应的exe文件所在的目录SHIFT+右键打开命令行，修改成自己要转换的文件跟路径就可以了。
接下来就是关键的页面了
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
style="position: absolute; left: 10px; top: 10px; width: 800px; height: 500px">
前台好了现在是后台，定义一个工具类
package com.demo.util;
import java.io.File;
import java.io.FileInputStream;
public class FlexPaperUtil {
/**
* 以二进制形式获取文件内容
*
* @param filePath
* 文件路径
* @return
*/
public static byte[] file_get_contents(String filePath) {
byte[] con = { 0 };
// 判断路径是否为空
if (filePath == null || filePath == "")
return con;
try {
File f = new File(filePath);
// 判断是否为文件及是否可读
if (!f.isFile() || !f.canRead())
return con;
FileInputStream fstream = new FileInputStream(filePath);
con = new byte[(int) f.length()];
fstream.read(con);
fstream.close();
} catch (Exception e) {
e.printStackTrace();
}
return con;
}
}
定义一个controller
package com.demo.web;
import java.io.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.demo.util.FlexPaperUtil;
@Controller
public class FlexController {
@RequestMapping(value = "/flex")
public String flex(HttpServletRequest request, HttpServletResponse response) {
return "flexpaper";
}
@RequestMapping(value = "/flex/view/{name}")
public void view(HttpServletRequest request, HttpServletResponse response, @PathVariable String name)
throws IOException {
BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());
String mySwfFilePath = request.getSession().getServletContext().getRealPath("/") + "\\docs\\pages\\" + name
+ ".swf";
System.out.println(mySwfFilePath);
byte[] content = FlexPaperUtil.file_get_contents(mySwfFilePath);
response.setContentLength(content.length);
outs.write(content);
outs.flush();
outs.close();
}
@RequestMapping(value = "/flex/view")
public void view2(HttpServletRequest request, HttpServletResponse response, @RequestParam String name)
throws IOException {
String dir = "";
if (name.contains("pdf")) {
dir = "\\pdf\\";
} else {
dir = "\\docs\\";
}
BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());
String mySwfFilePath = request.getSession().getServletContext().getRealPath("/") + dir + name;
System.out.println(mySwfFilePath);
byte[] content = FlexPaperUtil.file_get_contents(mySwfFilePath);
response.setContentLength(content.length);
//弹出错误对话框
// outs.write("Error:aaa".getBytes());
outs.write(content);
outs.flush();
outs.close();
}
}
运行后的结果
接下来是通用api：
页数跳转：
$FlexPaper("documentViewer").gotoPage(5);
适应控件宽度：
$FlexPaper("documentViewer").fitWidth();
适应控件高度：
$FlexPaper("documentViewer").fitHeight();
获取当前页数：
$FlexPaper("documentViewer").getCurrPage();
打印：
$FlexPaper("documentViewer").printPaper();
下一页：
$FlexPaper("documentViewer").nextPage();
上一页：
$FlexPaper("documentViewer").prevPage();
搜索：
$FlexPaper("documentViewer").searchText("");
切换显示模式：Two Page双页/Portrait单页
$FlexPaper("documentViewer").switchMode("Portrait");
==============================================================================================
最后是注释的api：
添加高亮：
$FlexPaper("documentViewer").addMark({
id : "1",
type : "highlight",
pageIndex : 1,
displayFormat : "flash",
readonly : false,
selection_text : "The UK",
selection_info : "1;0;5",
color : "#c2f785",
});
为高亮部分添加注释：不知道什么原因要运行两次才能出现注释框
$FlexPaper("documentViewer").addMark({
id : "2",
type : "highlight",
pageIndex : 1,
displayFormat : "flash",
readonly : false,
has_selection : true,
selection_text : "The UK",
selection_info : "1;0;5",
note : "这是注释",
color : "#c2f785",
//注释框顶点坐标
positionX : 350,
positionY : 150,
//注释框尺寸
width : 200,
height : 200
});
在指定点插入注释：
$FlexPaper("documentViewer").addMark({
id : "3",
type : "note",
pageIndex : 1,
displayFormat : "flash",
readonly : false,
//注释框是否收起
collapsed : false,
note : "这是注释",
points : "100,10",
//注释框顶点坐标
positionX : 100,
positionY : 150,
//注释框尺寸
width : 200,
height : 200,
});
框选指定区域插入注释：
$FlexPaper("documentViewer").addMark({
id : "4",
type : "drawing",
pageIndex : 1,
displayFormat : "flash",
note : "这是注释",
//框选区域的顶点坐标和对角点坐标
points : "10,10:200,150",
color : "#c2f785",
//注释框顶点坐标
positionX : 350,
positionY : 150,
//注释框尺寸
width : 200,
height : 200,
});
添加涂鸦：这个点会比较多
$FlexPaper("documentViewer").addMark({
id : "5",
type : "drawing",
pageIndex : 1,
displayFormat : "flash",
points : "91.55766944114157,174.79191438763377:85,174:82,174:82,168:76,
168:74,168:68,168:65,168:59,168:56,168:50,168:47,168:41,168:38,
168:32,168:29,168:23,168:23,174:23,177:20,177:20,183:20,186:20,
192:20,195:20,201:20,204:20,210:20,213:20,219:23,219:23,222:23,
228:29,228:29,231:29,237:32,237:32,240:32,245:38,245:38,248:38,
254:41,254:47,254:47,257:50,257:50,263:56,263:59,263:65,263:65,
266:68,266:74,266:74,272:76,272:82,272:85,272:91,272:94,272:94,
275:100,275:103,275:109,275:112,275:118,275:121,275:127,275:130,
275:136,275:139,275:139,281:145,281:148,281:154,281:157,281:162,
281:165,281:171,281:174,281:180,281:180,275:183,275:189,275:192,
275:198,275:198,272:201,272:207,272:210,272:216,272:216,266:219,
266:219,263:225,263:225,257:225,254:225,248:225,245:225,240:225,
237:225,231:225,228:225,222:225,219:225,213:225,210:219,210:219,
204:216,204:216,201:210,201:207,201:207,195:201,195:198,195:198,
192:192,192:189,192:183,192:180,192:180,186:174,186:171,186:171,
183:165,183:162,183:157,183:154,183:148,183:145,183:145,177:139,
177:139,174:136,174:130,174:127,174:121,174:118,174:112,174:109,
174:103,174:100,174:94,174:91,174",
color : "#FA1100",
});
最后是获取当前页的所有注释：可以根据下面的属性把注释存入数据库
var marks = $FlexPaper('documentViewer').getMarkList();
for (var i = 0; i < marks.length; i++) {
console.log("id:" + marks[i].id);
console.log("type：" + marks[i].type);
console.log("pageIndex：" + marks[i].pageIndex);
console.log("displayFormat：" + marks[i].displayFormat);
console.log("readonly：" + marks[i].readonly);
console.log("collapsed：" + marks[i].collapsed);
console.log("has_selection：" + marks[i].has_selection);
console.log("selection_text：" + marks[i].selection_text);
console.log("selection_info：" + marks[i].selection_info);
console.log("note：" + marks[i].note);
console.log("points：" + marks[i].points);
console.log("color：" + marks[i].color);
console.log("positionX：" + marks[i].positionX);
console.log("positionY：" + marks[i].positionY);
console.log("width：" + marks[i].width);
console.log("height：" + marks[i].height);
}