PDFJS的使用

PDFJS框架的使用與模態框

1. 模態框使用的bootstrap框架的模態框
2. 下載bootstrap框架和PDF.js
3. 在使用的時候需要在頁面先引入PDF.js和bootstrap.js這裏加載的是web項目下的靜態文件夾（/static）下的所有文件。

<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/> //這是放在taglib.jsp下的
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

1. 模態框

<div id="btn_browse" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="width: 100%;height: 100%;left: 450px; top:0px;">
    <div class="modal-header" style="background-color: rgb(0,0,0); filter: alpha(opacity=10);">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
        <h3 id="myModalLabel">預覽</h3>
    </div>
    <div class="modal-body" style="width: 100%;max-height: 800px; padding: 0px;">
        <iframe id="displayPdfIframe" width="100%" height="780px"></iframe>
    </div>
</div>

1. Html中通過點擊按鈕觸發js函數調用模態框，並把路徑傳入

<a data-toggle="modal" onclick="display(url)">預覽</a>

1. js函數調用

function display(url) {
    rand = Math.random();
        if(url!=""){
            $('#btn_browse').modal({
            });
            url1 = url+"?"+rand;
            $('#displayPdfIframe').attr("src",'${ctxStatic}/pdfjs/web/viewer.html?file=' + encodeURIComponent(url1));
            }else{
                alert("無法進行預覽");
            }
            //{ctxStatic}/pdfjs/web/viewer.html爲存放pdf.js的路徑
        }