最近做項目需要用到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"%>
<!DOCTYPE html>
<html>
<head>
<title>flexpaper_demo</title>
<meta content="charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/flexpaper.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.extensions.min.js"></script>
<script type="text/javascript" src="/js/flexpaper.js"></script>
<script type="text/javascript" src="/js/FlexPaperViewer.js"></script>
<script type="text/javascript" src="/js/flexpaper_handlers.js"></script>
</head>
<body>
<div id="documentViewer" class="flexpaper_viewer"
style="position: absolute; left: 10px; top: 10px; width: 800px; height: 500px"></div>
<script type="text/javascript">
//判斷是否是觸屏（移動設備）
$.get((!window.isTouchScreen) ? '/UI_flexpaper_desktop_flat.html'
: '/UI_flexpaper_mobile_flat.html', function(toolbarData) {
$('#documentViewer').FlexPaperViewer({
config : {
//swf文件的分頁模式
//SwfFile : "/flex/view/{Paper_[*,0].swf,28}",
//單swf文件模式
SwfFile : "/flex/view?name=Paper.swf",
//JSONFile : '/flex/view?name=Paper.js',
//pdf文件模式
//PDFFile : '/flex/view?name=Paper.pdf',
//初始縮放比例
Scale : 0.6,
//變焦模式一般都是'easeOut'
ZoomTransition : 'easeOut',
//變焦速度
ZoomTime : 0.5,
//變焦間隔
ZoomInterval : 0.2,
///適應加載
FitPageOnLoad : true,
//適應寬度加載
FitWidthOnLoad : false,
FullScreenAsMaxWindow : false,
ProgressiveLoading : true,
//最小比例
MinZoomSize : 0.2,
//做大比例
MaxZoomSize : 5,
SearchMatchAll : true,
//切換顯示模式：Two Page雙頁/Portrait單頁
InitViewMode : 'Portrait',
//加載方式
RenderingOrder : 'flash',
//顯示模式(單/雙頁)按鈕
ViewModeToolsVisible : true,
//縮放條
ZoomToolsVisible : true,
//頁面跳轉框
NavToolsVisible : true,
//焦點按鈕
CursorToolsVisible : true,
//搜索欄
SearchToolsVisible : true,
//通過請求的方式獲取的導航欄（響應式）
Toolbar : toolbarData,
//底部工具欄（用於註釋的添加刪除等）
BottomToolbar : '/UI_flexpaper_annotations.html',
WMode : 'window',
//按鈕提示語言
localeChain : "zh_CN",
}
});
});
</script>
</body>
</html>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;
}
}
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);
}