手机端与PC端在线预览PDF

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sand_clock/article/details/85266531

问题场景

公司需要把出具的报告在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正式部署的坑

展开阅读全文

没有更多推荐了,返回首页