当前位置：首页 > news >正文

H5移动端预览PDF方法

news 2025/7/7 18:44:12

新建页面

新建一个页面以便去预览对应的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.urlthis.getDataInfo(option.url)uni.setNavigationBarTitle({title: '报告详情',});},methods:{getDataInfo(url){this.$nextTick(()=>{this.pdfh5 = new Pdfh5('#demo', {pdfurl: url ,lazy: true, // 是否懒加载,默认falserenderType: 'canvas', // canvas、svg，默认canvasmaxZoom: 3, // 手势缩放最大倍数,默认3scrollEnable: true, // 是否允许pdf滚动,默认truezoomEnable: true,// 是否允许pdf手势缩放,默认truelimit: 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是通过路由跳转时携带的