移动端pdf在线预览（pdfh5使用）

1.下载pdfh5

这里我下载时候没有指定版本报了一些错，所以直接建议大家下载 1.4.3版本，

执行 npm install pdfh5@1.4.3   成功后如下图：

2.预览pdf 的组件（show-pdf），代码如下:

<template>
	<view class="pdfBox"  @click.capture='close()'>
		<view class="close-btn">
			关闭预览
		</view>
		<!-- <view id="previewPdf"  @click.stop></view> -->
		<div id="previewPdf"></div>
	</view>
</template>
<script>
import pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css'
export default {
	 props: {
	    url: {
	      type: String,
	      required: true,
	    },
	  },
	data() {
		return {
			pdfh5: null,
		}
	},
	mounted(){
		console.log("url",this.url);
		this.openPdf();
	},
	methods: {
		close(){
			this.$emit('close')
		},
		openPdf() {     //url：PDF文件地址
			this.pdfh5 = new pdfh5('#previewPdf', {
				pdfurl: this.url,
				backTop: true
			});
			this.pdfh5.on('success', () => {
				console.log('pdf渲染成功');
			});
		}
	}
}
</script>
<style lang="less" scoped>
.pdfBox {
	position:fixed;
	top: 0;
	left: 0;
	height: 100vh;
	overflow: hidden;
	z-index: 99;
	width: 100%;
	color: red;
	#previewPdf {
		height: 100vh;		
	}
}
.close-btn{
	position: fixed;
	top:20rpx;
	right: 20rpx;
	z-index:900;
	font-size:35rpx;
	padding: 20rpx ;
	text-align: center;
	border-radius: 25rpx;
	// background-color: rgba(0,0,255, 0.6);
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
}

.pdfBox #previewPdf .textLayer .textLayerItem {
  font-size: 50px;
}

.pdfjs .backTop{
	background-color: none !important;
}
</style>

3.引用pdf 的vue 页面

<showpdf v-if="showPdf" @close='closePdf()' :url="pdfFile"></showpdf>

data() {
			return {
				showPdf: false,
				pdfFile: "", //pdf完整路径地址
			}
		},
methods: {

			closePdf() {
				this.showPdf = false
			},
	        openFile(file) {
					this.pdfFile = this.baseUrl + file
					this.showPdf = true
            },
....

        }
            

最后的效果如下 (内容打码了，真实很清晰)