PDF在线预览插件：PDFObject web端预览（不支持手机网页预览，手机网页预览见下一篇博客）；

项目相关：

• version : PDFObject v2.2.7
• Vue 、 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链接并展示

	 //获取刚才创建的div
	  var 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预览的全部操作，个人开发过程中所遇到的，简单总结，已做记录,如果对你有用，那就点个赞吧！如有错误还望指正！一（只）直缓慢前进的全栈码畜~