新建页面
新建一个页面以便去预览对应的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组件会去自动渲染