doc文件前端预览jquery

 概况：在项目实践中，运用到在线预览pdf的功能，现记录下来，有需要的朋友可供参考学习，一个在成长中的程序猿，书山有路勤为径，学海无涯苦作舟。

---

运用：vue框架+element-ui组件技术，运用于web前端的预览形式。题外话，移动端需要再深入，为呈现更好的效果。

构想：单独制作一个简单的预览页面，配合<el-dialog>组件完成遮罩效果，父页面与子页面配合传参的方式控制显示与否，按这个思路类似其他的框架+dialog的模式应该也能实现类似效果。

废话不多说直接上步骤+代码：

1）首先在父类页面同层级中创建文件夹components+子类页面如下图：

 2）子页面部分，引入pdfobject.js文件，编写一个div容器用于存放显示pdf文件，代码段中已注释相应功能的描述，在这就不一一再另外说明了；

<template>
    <!--容器-->
    <div class="pop"></div>
</template>

<script>
	/*替换成你的文件路径*/
	import pdf from '../../../../utils/pdfobject.js'; 
	export default {
		name: "PreviewPdf", //组件名称
		props: {
			//父类传值pdf动态路径
			pdfUrl: {
				type: String,
				default: "",
				required: true
			},
		},
		data() {
			return {}
		},
		created() {},
		methods: {},
		//挂载完成，用于监听父类方法，现未使用
		mounted: function() {
			this.$nextTick(function() {
				this.$on('preview', function() {
					console.log('监听成功')
				})
			})
		},
		//挂载前
		beforeMount() {
			var that = this;
			that.$nextTick(function() {
				//调用pdfobject.js内的方法，
				//#pop=id,div的id上述有描述（自定义）
				pdf.embed(that.pdfUrl, "#pop");
			});
		},

	}
</script>

<style>
</style>

3）最后是父类执行相应的方式和功能的控制，代码段中已注释相应功能的描述，某些提醒方法和文件引用路径请自行修改，因为是我本地的可能与你的项目不符；

<template>
	<div class="container">
		<!-- 触发的按钮 -->
		<button type="text" size="small" @click='preview(scope.$index,scope.row)'>预览</button>
		<!--控制显示-->
		<div v-if="showPdf" class="container-pdf">
			<!--dialog组件-->
			<el-dialog :title="pdfTitle" :visible.sync="showPdf" center :append-to-body='true' :lock-scroll="false"
				width="70%" top="2vh">
				<!--文件预览组件-->
				<preview-pdf class="el-dialog-div" :pdfUrl="pdfUrl" :showPdf="showPdf" @on-close="closeDialog">
				</preview-pdf>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	/*更换成你的子页面路径引用*/
	import PreviewPdf from 'views/parentClass/components/PreviewPdf';
	import Vue from 'vue';
	export default {
		//运用组件
		components: {
			PreviewPdf
		},
		data() {
			return {
				showPdf: false,
				pdfUrl: '', //pdf路径
				pdfTitle: '文件预览'
			};
		},

		methods: {
			/*
			 预览pdf文件
			 index：索引，可有可无
			 rows：对象，对象内FileURL就是我路径地址类似：/uploadfiles/16282514130330u0/220.pdf
			 备注：按自己的数据传入相应的pdf地址就可以了
			*/
			preview(index, rows) {
				// 通过地址判断是否为图片类型文件
				var ext = rows.FileURL.slice(rows.FileURL.lastIndexOf('.') + 1).toLowerCase();
				ext = ext.toLowerCase();
				if (ext == "pdf") {
					this.showPdf = true; //开启弹框
					this.pdfUrl = rows.FileURL; //赋值动态路径
				} else {
					this.$ShowBox(1, "非pdf文件无法预览");
				}
			},
			//关闭弹框
			closeDialog() {
				this.showPdf = false;
			},
		},
		mounted() {},
		//创建完成
		created: function() {
			this.getTabData();
		},
	};
</script>

<style lang="scss" scoped>
	//这两个样式根据项目自行调整，
	//page属于本地项目公共样式，element-ui属于框架样式
	@import "~@/assets/styles/page.scss";
	@import "~@/assets/styles/element-ui.scss";

	.el-dialog-div {
		height: 80vh;
		overflow: auto;
	}
</style>

呈现效果：

  

最后提醒，首先需要替换成自己项目的文件路径和命名的地方不要弄错，其次该文章所描述内容只是一个简单实例，仅供大家参考。