HTMl实现在线显示pdf格式文档,第一次接触这个插件,慢慢摸索查资料才实现该功能。实现过程还遇到了bug。
- 首先获取文件的路径。
获取文件路径就有了新的问题:(1)你的文件路径是否在同一个服务器。(2)如果你的文件是存在本地路径,则需要在你的项目配置一下虚拟路径,不然利用插件是找不到文件的位置的。
配置虚拟路径
本人是用SpringBoot框架,所以配置是根据SpringBoot框架配置的,如果你的不是,可以去百度其他框架的配置文件配置。
配置虚拟路径如下:
# 文件虚拟路径配置 由于该项目用了shiro安全验证框架,所以就没用/** 加了一层document
spring.mvc.static-path-pattern=/document/** #允许访问的路径
spring.http.multipart.location=/D:/file/ #文件的本地路径
spring.resources.static-locations=classpath:/,file:${spring.http.multipart.location} #配置静态资源路径
shiro的参数配置(如果没用到shiro可以不用管)当时我没配置这个,就访问不了文件,被拦截了,所以就在shiro配置一下让它不拦截这个目录下的外部文件
filterChainDefinitionMap.put("/document/**", "anon");
- 前端实现在html页面利用iframe来实现。
去下载viewer插件官网:Viewer下载地址
下载完成之后放到你的前端项目里,前端实现代码:
<iframe src="" id="ifr_html" frameborder="0" scrolling="no"style="width:100%;height:70cm;background: #e6e6e6">
</iframe>
$("#ifr_html").attr("src","这个位置是你下载viewer.html的路径?file=你文件的路径")
//例如我要打开/fengdong_web/static/plugins/pdfjs/web/viewer.html?file=http://127.0.0.1:8088/document/体温检测人证核查设.pdf'
以上步骤可能你都配好了,但可能还是报错,因为我就是这样,后面百度了别人的,也解决了,报了这个错:PDF.js访问远程服务器报file origin does not match viewer’s
我根据这为大佬的说的解决了这个错:解决这个错的链接:https://blog.csdn.net/fuzhongbin/article/details/83576756
链接