Vue + pdfJs 预览PDF

简介： vue项目中结合el-dialog组件，以全屏的形式将pdf流通过pdfJs展示出来（如果是本地的pdf文件，则直接拿到本地的pdf文件转化成url嵌入iframe即可，无需pdfJs插件）。
原理： 将获取到的pdf文件流文件通过window的createObjectURL方法转换成url，和pdfJs的目录路径拼接成链接，用iframe嵌入的方式展现。

步骤：

一、创建预览文件。

1. 下载pdfJs到本地（官网下载地址），放到项目根目录下的static文件夹内，将文件命名为pdfJs。

2. 创建文件：comPdfShow.vue

<template>
	<div class="pdf">
		<el-dialog
			:visible.sync="dialogVisible"
			fullscreen
			:modal="false"
			@close="dialogVisible = false"
		>
			<div class="showPdf">
				<iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'ComPdfShow',
		data() {
			return {
				src: '', // pdf文件地址
				dialogVisible: false,
			};
		},
		watch: {
			dialogVisible() {
				if (!this.dialogVisible) {
					this.src = '';
				}
			},
		},
		methods: {
			/**
			* 预览PDF
			* @file {Object/File} pdf文件流或本地文件，文件流转换url后传入pdfJs展示；本地文件则转换成url直接iframe展示
			* @type {String} 文件类型，值为：01（文件流，可不传，不传默认为文件流）/02（本地文件）；标记传过来的是文件流还是本地文件
			**/
			previewPDF(file, type) {
				this.dialogVisible = true;
				const viewPage = 'static/pdfJs/web/viewer.html?file='
				if (type && type === '02') {
					const urlSrc = this.getObjectURL(file)
					this.src = urlSrc
				} else {
					const urlSrc = this.getObjectURL(file)
					const fileUrl = viewPage + encodeURLComponent(urlSrc);
					if (fileUrl) {
						this.src = fileUrl
					} else {
						console.log('转换失败');
						this.dialogVisible = false;
					}
				}
				
			},
			/**
			* 将刘文件转换成url
			* @file {Object} pdf文件流
			**/
			getObjectURL(file) {
				let url = null;
				if (window.createObjectURL !== undefined) {
					url = window.createObjectURL(file)
				} else if (window.webkitURL !== undefined) {
					try {
						url = window.webkitURL.createObjectURL(file)
					} catch (error) {
						console.log("urlError=>", error)
					}
				} else if (window.URL !== undefined) {
					try {
						url = window.URL.createObjectURL(file)
					} catch (error) {
						console.log("urlError=>", error)
					}
				}
				return url;
			},
		},
	};
</sccript>
<style lang="less" scoped>
	.showPdf {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.showPdf > span {
		width: 100%;
		height: calc(~"100% - 35px");
		overflow: hidden;
		overflow-y: auto;
	}
	.arrow {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #eee;
		.page {
			margin: 0 10px;
		}
	}
	.el-input {
		width: 20px;
	}
	.el-button--mini {
		padding: 5px;
	}
	.el-icon--right {
		margin-left: 0;
	}
</style>

二、 引用：

1. html部分：

<com-pdf-show ref="comPdfShow"></com-pdf-show>

2. 需展示时，调用：

this.$refs.comPdfShow.previewPDF(file)

完。