105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<web-view :src="url" @message="handlePostMessage"></web-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/* uni页面通信文档
|
||
* https://ask.dcloud.net.cn/article/35083
|
||
* 组件使用pdf.js源码修改了部分内容
|
||
* 只需要完成web-view监听页数并与uni通信即可
|
||
* @kklxx 2022/12/09修复组件通信
|
||
*/
|
||
import { computed } from 'vue'
|
||
export default {
|
||
props: {
|
||
path: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
viewerUrl: '/hybrid/html/web/viewer.html', // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
|
||
fileUrl: '', // 要访问的本地pdf的路径
|
||
url: '', // 最终显示在web-view中的路径
|
||
currentPage: 1, //初始页
|
||
totalPage: 0, //总页码
|
||
currentReadPage: 0 //当前页码
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
// console.log('页面信息：', options)
|
||
// this.fileUrl = options.url
|
||
// /* 设置标题 */
|
||
// uni.setNavigationBarTitle({
|
||
// title: 'PDF预览'
|
||
// })
|
||
// /* 初始页面 */
|
||
// this.pageInt() //获取pdfs数据
|
||
},
|
||
|
||
mounted() {
|
||
console.log('mounted-pdfView', this.path)
|
||
/* H5页面通信方式 */
|
||
// #ifdef H5
|
||
window.addEventListener('message', this.ReceiveMessage)
|
||
// #endif
|
||
this.fileUrl = this.path
|
||
/* 设置标题 */
|
||
uni.setNavigationBarTitle({
|
||
title: 'PDF预览'
|
||
})
|
||
/* 初始页面 */
|
||
this.pageInt() //获取pdfs数据
|
||
},
|
||
|
||
//页面销毁前
|
||
beforeDestroy() {
|
||
uni.removeStorage({
|
||
//清除pdf留下的缓存，不干扰新的pdf载入
|
||
key: 'pdfjs.history',
|
||
success() {
|
||
// console.log("removeStorage", res)
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
//页面初始化
|
||
pageInt() {
|
||
this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}&page=` + this.currentPage
|
||
},
|
||
/*
|
||
* 做成监听滚动条判断更好
|
||
*
|
||
*/
|
||
//uni 组件通信 监听
|
||
handlePostMessage(data) {
|
||
let arr = data.detail.data.pop()
|
||
this.totalPage = arr[0].totalPage //总页数
|
||
this.currentReadPage = arr[1].page //当前页数
|
||
console.log('app:', this.totalPage, this.currentReadPage)
|
||
},
|
||
//h5 监听
|
||
ReceiveMessage(event) {
|
||
if (event.data && event.data.data && event.data.data.arg) {
|
||
this.totalPage = event.data.data.arg[0].totalPage
|
||
this.currentReadPage = event.data.data.arg[1].page + 1
|
||
}
|
||
console.log('app:', this.totalPage, this.currentReadPage)
|
||
},
|
||
|
||
//页面销毁前动作
|
||
addBrowseRecord() {
|
||
// console.log("总页数：",this.totalPage);
|
||
// console.log("当前页数：",this.currentReadPage);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|