YNUtdPlatform/pages/YNEduApp/learnProj/components/PdfView.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>