H5移动端预览PDF方法

新建页面

新建一个页面以便去预览对应的pdf

新建完后在pages.json文件内去新增对应路由

页面内容

复制代码

<template>
	<view class="page">
		<view class="pdf">
			<view id="demo"></view>
		</view>
		<view class="backPage" @click="goBack">
			<uni-icons type="back" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css";
export default {
	data() {
		return {
			src: '',
			pdfh5: null
		}
	},
	onLoad(option) {
		this.src = option.url
		this.getDataInfo(option.url)
		uni.setNavigationBarTitle({title: '报告详情',});
	},
	methods:{
		getDataInfo(url){
			this.$nextTick(()=>{
				this.pdfh5 = new Pdfh5('#demo', {
					pdfurl: url ,
					lazy: true, // 是否懒加载,默认false
					renderType: 'canvas', // canvas、svg，默认canvas
					maxZoom: 3, // 手势缩放最大倍数,默认3
					scrollEnable: true, // 是否允许pdf滚动,默认true
					zoomEnable: true,// 是否允许pdf手势缩放,默认true
					limit: 0, // 限制pdf加载最大页数,默认0不限制
					goto: 0,
					// 设置每一页pdf上的水印
					// logo: { src: require("@/assets/images/icon27.png"), x: 20, y: 70, width: 60, height: 60 },
				});
				console.log('pdfh5', this.pdfh5)
				// 监听pdf准备开始渲染，此时可以拿到pdf总页数
				this.pdfh5.on('ready', function(totalNum) {
					console.log('总页数:' + totalNum);
				});
				// 监听pdf加载完成事件，加载失败、渲染成功都会触发
				this.pdfh5.on('complete', (status, msg, time) => {
					console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒');
				})
			})
		},
		goBack() {
			this.$tab.navigateBack();
		},
	}
}
</script>

<style scoped lang="less">
	.pdf {
		padding-bottom: 120rpx;
	}
	
	.backPage {
		background-color: #fff;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		
		position: fixed; /* 固定定位 */  
		bottom: 200rpx; /* 紧贴底部 */  
		right: 30rpx; /* 紧贴右侧 */  

		text-align: center; /* 文字居中 */  
		line-height: 80rpx; /* 行高，使文字垂直居中 */  
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3); /* 阴影效果 */  
		z-index: 1000; /* 确保盒子在其他内容之上 */ 
	}
</style>

在页面内，我的url是通过路由跳转时携带的

this.$tab.navigateTo("/pages/preview/preview?url=xxx"

把对应的url给 pdfurl组件会去自动渲染