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组件会去自动渲染

相关推荐
栈老师不回家8 分钟前
Element UI 组件库详解【Vue】
前端·vue.js·ui
前端青山16 分钟前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵22 分钟前
什么是Sass,有什么特点
前端·rust·sass
栈老师不回家31 分钟前
axios 请求跨域问题
前端·vue.js
前端拾光者41 分钟前
前端数据可视化思路及实现案例
前端·数据库·信息可视化
沉默璇年1 小时前
react中Fragment的使用场景
前端·react.js·前端框架
前端熊猫2 小时前
transform学习
前端·学习·html
GISer_Jing2 小时前
React渲染流程与更新diff算法
前端·javascript·react.js
郑祎亦2 小时前
JavaWeb开发:HTML 页面与接口对接
前端·后端·java-ee·html
Au_ust2 小时前
css:感觉稍微高级一点的布局
前端·css