手机端与PC端在线预览PDF

问题场景

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

实现方式与资源链接

pdf.js

环境

IDEA
JDK1.8
TOMCAT8

解决步骤

1、把下载的资源放到工程的webapp下

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路径，本地调试时参考步骤4，部署tomcat时可以配置tomcat虚拟路径
        var prefix = "${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”;

4、在idea调试时需要配置下
a: Tomcat Server => Deployment => +号 => External Source… => 选择本地路径
b: 在右侧的Application context处填写虚拟路径：/h5RestorePdf

5、正式部署tomcat配置虚拟目录
ps: 配置虚拟目录可以把静态资源与项目部署进行分离
方法：

1. vim tomcat-xxx/conf/server.xml
2. 找到Host标签，添加<Context path="/h5RestorePdf" docBase="/web/xxx/h5_restore_pdf" reloadable="true" crossContext="true"></Context>，保存重启。

彩蛋：pdf.js正式部署的坑