下载pdf文件放在static文件夹下
bug1：hbuildX创建的项目pdf文件夹可以放在根目录下面，但是cli创建的项目无法预览，只能放在static下面
bug2：oss上文件无法预览，因为跨域限制，需要在oss设置允许跨域
按钮跳转预览页面
<button @click="toPdf">pdf</button>
methods: {
toPdf() {
uni.navigateTo({
url: './course/pdf'
})
}
}
预览页面
重点：1、viewerUrl的路径
<template>
<view class="content">
<web-view :src="url1" @message="handlePostMessage"></web-view>
<!-- <web-view src="https://cn.bing.com/" @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 {
data() {
return {
viewerUrl: '/static/pdf/web/viewer.html', // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
fileUrl: "", // 要访问的本地pdf的路径
url1: '', // 最终显示在web-view中的路径
// currentPage: 1, //初始页
totalPage: 0, //总页码
currentReadPage: 0, //当前页码
};
},
onLoad(options) {
this.fileUrl = "http://103.213.97.43:8081/group1/M00/00/EF/wKgAoWVEZgiAA8tOAAtT0ZynsZE457.pdf"
/* 初始页面 */
this.pageInt(); //获取pdfs数据
},
mounted() {
/* H5页面通信方式 */
// #ifdef H5
window.addEventListener("message", this.ReceiveMessage);
// #endif
},
//页面销毁前
beforeDestroy() {
uni.removeStorage({
//清除pdf留下的缓存，不干扰新的pdf载入
key: 'pdfjs.history',
success() {
// console.log("removeStorage", res)
}
})
},
methods: {
//页面初始化
pageInt() {
this.url1 = `${
this.viewerUrl}?file=${
encodeURIComponent(this.fileUrl)}&page=` + 1;
console.log(this.url1, 99)
},
/*
* 做成监听滚动条判断更好
*
*/
//uni 组件通信 监听
handlePostMessage(data) {
let arr = data.detail.data.pop()
this.totalPage = arr[0].totalPage //总页数
this.currentReadPage = arr[1].page + 1 //当前页数
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:11111111", event, this.totalPage, this.currentReadPage);
},
//页面销毁前动作
addBrowseRecord() {
// console.log("总页数：",this.totalPage);
// console.log("当前页数：",this.currentReadPage);
},
}
};
</script>
<style lang="scss" scoped></style>