电脑网页端实现PDF在线预览插件- -PDFObject
1、引入2、HTML中开拓个模块区域3、JS动态载入PDF4、效果图演示项目相关：version : PDFObject v2.2.7Vue 、 BootStrap
这段时间再开发一个功能，期中遇到了一个Pdf在线预览的问题，其实电脑网页端预览都是比较简单的，有很多插件可以用，而我用的是PDFObject，比较简单，容易上手，下面来简单介绍下吧！
博主用的是PDFObject v2.2.7版本的插件，下面提供我的：
–PDFObject官网链接》》》
–我这儿新建了个简单的Demo，不要积分，可开箱即用》》》
1、引入
将插件所需的依赖Js引入到自己的界面中去<script type="text/javascript" src="/statics/libs/pdf/pdfobject.min.js"></script>
2、HTML中开拓个模块区域
在页面中开拓一块区域来展示你要预览的PDF<div class="message" style="height: 120px; " v-show="showDetail" ><div class="centered" style="height: 120px; "><h3 id="caseTitle" style="text-align: center;">查看案例</h3><button class="btn btn-warning" @click="reload" style="float: right">返回</button></div><!-- 下面是放pdf的区域 --><div id="casePanel" style="text-align: center; margin: 30px; color: #0a0a0a">---------这里是预览区域</div></div>
3、JS动态载入PDF
从后台获取所需展示的PDF链接并展示//获取刚才创建的divvar div = document.getElementById("casePanel");//设置标题document.getElementById("caseTitle").innerText = this.cases.caseName;//设置div高度,这里设置的固定值div.style.height = "800px";//这里实现PDF预览和演示PDFObject.embed(this.cases.fileLoadUrl.toString(), "#casePanel");
4、效果图演示
》》后面还有一篇关于手机预览的点击此处跳转
以上便是网页端实现PDF预览的全部操作，个人开发过程中所遇到的，简单总结，已做记录,如果对你有用，那就点个赞吧！如有错误还望指正！一（只）直缓慢前进的全栈码畜~
