pdf.js開發經驗

在接觸到一個需要支持在線閱讀*.pdf文件的項目,查了一些資料,有不少JQuery插件可以支持在線閱讀,但IE的默認情況下是需要下載後在本地觀看的,爲了支持IE故選擇了pdf.js採用html5來實現在線閱讀,不過因爲是需要html5的支持,所以ie低版本不支持html5。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML >
<html>
<head>
<%@include file="/WEB-INF/jsp/inc/reception.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body{
	padding-top: 50px;
	text-align:center;
}
.operate{
	margin: 10px;
}
#info{
	margin:10px;
	color:red;
}
</style>
</head>
<body>
  <div class="operate" >
    <button id="prev" onClick="goPrevious()">上一頁</button>
    <button id="next" onClick="goNext()">下一頁</button>   
    <span>當前: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>
  <div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
    <div id="info" >正在加載,請稍候...</div>
  </div>
  <div class="operate" >
    <button id="prev" onClick="goPrevious()">上一頁</button>
    <button id="next" onClick="goNext()">下一頁</button>   
    <span>當前: <span id="pageNum"></span> / <span id="pageCount"></span></span>
  </div>
  <input type="hidden" id="pdfUrl" value="../file/text/${article.bookPath}" />
</body>
<!-- 讓不支持HTML5的瀏覽器支持HTML5 -->
<script src="pdf/js/html5.js" type="text/javascript" charset="UTF-8"></script>
<!-- 因爲pdf.js需要支持canvas屬性,導入該文件爲了讓不支持canvas屬性的瀏覽器也可以支持 -->
<script src="pdf/js/excanvas.compiled.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="pdf/js/pdf.js"></script>
  <script type="text/javascript">
    //隱藏域存有pdf的所在路徑,動態讀取pdf
    var url = $("#pdfUrl").val();
    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 1.7,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    function renderPage(num) {
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
	//pdf加載完畢後,頁面提示信息淡出
        $("#info").fadeOut(3000);
      });
	//爲了方便,在頁面的頂部和底部都加上了翻頁按鈕
      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
      document.getElementById('pageNum').textContent = pageNum;
      document.getElementById('pageCount').textContent = pdfDoc.numPages;
    }

    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }

    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
  </script> 
</html>

在這裏需要提到的是swftool+flexpaper這兩個插件也可以實現在線閱讀pdf,只不過在讀取文件之前使用swftool轉換成*.swf文件,再用flexpaper播放轉換後的*.swf文件。不過,這樣轉換後載入很慢,Of course,在使用這兩個插件的時候也可以在上傳文件的時候就直接把pdf轉換成swf,之前也有類似經驗,覺得不是很方便。所以棄之不用。
只是一個很簡單的demo,如有處理不妥之處,還請大神賜教,表示感謝。新手可借鑑,如有新發現,歡迎交流

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章