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的路径
        }