pdf.js的使用 （3）真实项目分享

需求：a.jsp页面要做一个pdf的预览功能，我采用layer.open()弹窗的形式来预览pdf

1.在a.jsp点击文件然后弹出窗口（其实是弹出b.jsp）

var lay=layer.open({
　　type: 2,
   title:"弹窗的名字",
   shadeClose: true,
   shade: 0.8,
   area: ['100%', '100%'],
   content: "/afArchiveDetail/operate.do?ArchiveDetailUUID=" + o.archiveDetailUUID+"&YearMonth="+o.yearMonth+"&AllowDownload="+(this.obj.allowDownload ||"")+"&flag=operate&callbackname=updateShowFileName"
 });

content:参数可以是一个请求后台的url路径，通过后台然后返回一个jsp页面（假设返回就是b.jsp页面）

2.在b.jsp页面这样写

这个可以是直接看一个pdf文件
<%--<iframe id="pdfView" width="99%" height="400" src="${sysHostUrl }/static/js/pdfJs/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf&downloadFlag=false"></iframe>--%>

关键看这个
----------------HTML----------------
<iframe id="pdfView" width="99%" height="99%"></iframe>


----------------JS------------------
在vue.js里面这样写，在created函数里面调方法（我这里只是从项目里面挑选了部分关键代码出来，需要的同学可以根据自己的情况来改）

created : function () {
    this.viewPDF()；
},

viewPDF : function () {

    let pdfView = document.getElementById('pdfView')；

    let pdfUrl="/webApi/downPDF.do?ArchiveDetailUUID="+_key+"&YearMonth="+_yearMonth+"&number="+Math.random();
    //&downloadFlag=false 这个参数是我用来控制viewer.html的打印，下载，上传按钮的，为false时都变为灰色，不能点击
    //获取流文件的方式预览pdf文件
    let src = "/static/js/pdfJs/web/viewer.html?file=" + encodeURIComponent(pdfUrl)+"&local="+'${curLang}'+"&downloadFlag=false&isrequest=true&archiveDetailUUID="+_key+"&allowdownload="+_allowdownload;
    pdfView.src=src;
},

3.在viewer.html页面这样写

<script>

    //url="/static/js/pdfJs/web/viewer.html?file=%2FwebApi%2FdownPDF.do%3FArchiveDetailUUID%3Dff8080816cb8b7a4016cb8eb46de0006&downloadFlag=false";
    //search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
    //substr(1)   就是从索引1开始截取
    var archiveDetailUUID;
    var isRequest;
    var queryString = document.location.search.substring(1); //获得浏览器地址栏URL串
    var params = parseQueryString(queryString);//对URL串进行解码 解析后返回的数据格式：{file: "/webApi/downPDF.do?ArchiveDetailUUID=ff8080816cb8b7a4016cb8eb46de0006", downloadflag: "false", archivedetailuuid: "ff8080816cb8b7a4016cb8eb46de0006"}
    archiveDetailUUID=params.archivedetailuuid;
    isRequest=params.isrequest;//是否请求服务器， true/false
    var CURLANG=params.local;//语言
  
 
    function parseQueryString(query) {
        var parts = query.split('&');
        var params = Object.create(null);

        for (var i = 0, ii = parts.length; i < ii; ++i) {
            var param = parts[i].split('=');
            var key = param[0].toLowerCase();
            var value = param.length > 1 ? param[1] : null;
            params[decodeURIComponent(key)] = decodeURIComponent(value);
        }
        return params;
    }

</script>
    <script src="viewer.js"></script>

那到这一步了基本上就可以在viewe.html取到其它页面传过来的值了

哎呀！把pdf.js的中英文切换一起写了吧

var CURLANG=params.local;就是多语言切换了 （这个是写在viewer.html里面的，可以看上面的代码怎么把参数从其它的jsp页面传过来！）
在viewer.js里面这样改

 

 来看下效果图：

技术水平有限，只能写成这样的了，如果发现有写的不对的还请多多指教，希望能帮助到有需要的人