手机端与PC端在线预览PDF

问题场景

公司需要把出具的报告在PC端进行在线预览，之前一直用embed标签解决，效果很好。产品提出在手机端（微信链接或者手机浏览器）也要在线预览，尴尬的是安卓端提示的是下载，IOS端只能看不能滑动。经一番调研采用pdf.js完美解决。

实现方式与资源链接

pdf.js

环境

IDEA
JDK1.8
TOMCAT8

解决步骤

1、把下载的资源放到工程的webapp下
手机端与PC端在线预览PDF
2、页面代码 pdfShow.jsp

<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/weChat/report/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 你的PDF路径，只能是工程路径，本地路径不可以
        var prefix = "${pageContext.request.contextPath}/old/${pdfPath}";
        var url = "${pageContext.request.contextPath}/static/pdf/web/viewer.html?file=" + prefix;
        $("#displayPdf").attr("src", url);
    });
</script>
<div class="ctrlDiv">
    <div class="eleContainer elePaddingBtm">
        <iframe id="displayPdf" width="100%" height="100%"></iframe>
    </div>
</div>

3、前台(PC端和手机端)调用后台获取路径进行展示
。。。
赋值pdfPath
。。。
return “pdfShow.jsp”;