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

相关推荐
真的很上进3 分钟前
⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
java·前端·javascript·react.js·前端框架·vue·es6
小牛itbull3 分钟前
ReactPress 安装指南:从 MySQL 安装到项目启动
前端·javascript·数据库·mysql·react.js·开源·reactpress
@大迁世界8 分钟前
释放 PWA 的力量:2024 年的现代Web应用|React + TypeScript 示例
前端·javascript·react.js·前端框架·ecmascript
宅博士小陈8 分钟前
NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍
前端·javascript·vue.js
布兰妮甜16 分钟前
Angular框架:构建现代Web应用的全面指南
前端·javascript·前端框架·angular.js
lu_rong_qq24 分钟前
分享 pdf 转 word 的免费平台
pdf
雪碧聊技术1 小时前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan1 小时前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui