排版沒時間弄，僅做個人記錄。
我們的項目中有個需求，統計閱讀pdf的進度。存在2個問題，
第一，怎樣閱讀pdf
第二，怎樣統計閱讀進度，得到課件總頁數和已閱讀的頁碼，兩者的百分比就是進度。
做到閱讀pdf並不難，頭痛的是統計閱讀進度。我們先實現閱讀pdf。我的頁面是點擊課件列表中某個課件，跳轉到pdf閱讀頁面，但不是去啓動pdf閱讀器如福昕，而是在瀏覽器上閱讀pdf。
定義table和超鏈接。
datatable += "<a target='_blank' href='<%=request.getContextPath()%>/admin/sysadmin/readPdfNew.jsp?fileId="+exam[i].id+"&filePath="+encodeURIComponent(filePath)+"&fileName="+encodeURIComponent(fileName)+"'>"+exam[i].name+"</a>" + "\",\"";
table = $('#coursetable').DataTable(
{
"bSort" : false,
autoWidth: true,
data : eval(datatable),
"oLanguage" : {//下面是一些漢語翻譯
"sSearch" : "搜索 ",
"sLengthMenu" : "每頁顯示 _MENU_ 條記錄",
"sZeroRecords" : "沒有檢索到數據",
"sInfo" : "顯示 _START_ 至 _END_ 條 共 _TOTAL_ 條",
"sInfoFiltered" : "(篩選自 _MAX_ 條數據)",
"sInfoEmpty" : "",
"sProcessing" : "正在加載數據...",
"sProcessing" : "<img src='{{rootUrl}}global/img/ajaxLoader/loader01.gif' />", //這裏是給服務器發請求後到等待時間顯示的 加載gif
"oPaginate" : {
"sFirst" : "首頁",
"sPrevious" : "前一頁",
"sNext" : "後一頁",
"sLast" : "末頁"
}
},
"columns": [
{ "width": "30%" },
{ "width": "20%" },
{ "width": "20%" },
{ "width": "15%" },
{ "width": "15%" },
]
});
以上是超鏈接部分，鏈接到閱讀頁面如下:
<%
out.clear();
out = pageContext.pushBody();
response.setContentType("application/pdf");
try {
String filePath = (String)request.getParameter("filePath");
String fileId = request.getParameter("fileId");//課件id
//對encodeURIComponent做解碼，否則中文亂碼！
String strPdfPath = new String(filePath.getBytes("ISO8859-1"),"utf-8");
//判斷該路徑下的文件是否存在
File file = new File(strPdfPath);
if (file.exists()) {
response.reset();
DataOutputStream temps = new DataOutputStream(response
.getOutputStream());
DataInputStream in = new DataInputStream(
new FileInputStream(strPdfPath));
byte[] b = new byte[2048];
while ((in.read(b)) != -1) {
temps.write(b);
temps.flush();
}
in.close();
temps.close();
} else {
out.print(strPdfPath + " 文件不存在!");
}
} catch (Exception e) {
e.printStackTrace();
System.out.print("error :"+e.getMessage());
out.println(e.getMessage());
}
%>
把這段代碼放入jsp中即可。這是直接調用谷歌瀏覽器閱讀pdf，可以閱讀，然而並不能統計進度，因爲無法得到課件總頁數與當前閱讀頁數。於是我們採用另一種辦法。
有個插件pdf.js的，網站http://localhost:8080/pdf.js-master/web/viewer.html,可以下載demo，可以到我的資源裏面去下載。將這整個demo放入tomcat的webapps目錄下，然後訪問demo目錄裏面web/viewer.html，即可開始閱讀。
定義超鏈接，通過file參數傳遞文件路徑，我這裏tomcat做了虛擬路徑。仔細閱讀插件viewer.js，可以去得當前閱讀課件的總頁數和當前頁碼，
<iframe src="pdfjs/web/viewer.html?file=/filePath/<%=filePath%> width="100%" height="800"></iframe>
我們需要在viewer.html中定義一個定時器，每隔10秒ajax上報一次當前閱讀的頁碼，後臺在將頁碼寫入到數據庫後，每個頁碼已逗號隔開形式保存。最後方便統計閱讀進度。
$(document).ready(function(){
var sh;
sh=setInterval(show,10000);//30秒刷新一次學習時間
});
function show(){
var curNumber = $("#curNumber").val();
var allNumber = $("#allNumber").val();
var fileId = $("#fileId").val();
var userId = $("#userId").val();
var courseName = $("#courseName").val();
$.ajax({
url:'./StudyScheduleCalServlet',
data:{
curNumber:curNumber,
allNumber:allNumber,
fileId:fileId,
userId:userId,
courseName:courseName
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
}
});
}
我當時做這塊時候，如果傳遞的是中文名的pdf，會出現亂碼，導致無法打開，按照我項目的流程，在上傳課件到服務器之後，需要將文件名轉換爲uuid形式保存在服務器磁盤上，這是前臺顯示的是中文名，而鏈接過來的是uuid文件名，避開亂碼問題，因爲調試亂碼真的頭疼。
OK，以上是pdf.js閱讀pdf，並統計閱讀進度過程。
