Download the pdf file and put it in the static folder
Bug1: The project pdf folder created by hbuildX can be placed under the root directory, but the project created by cli cannot be previewed and can only be placed under static
Bug2: Files cannot be previewed on oss because of cross-domain restrictions. You need to set up oss to allow cross-domain
Button to jump to preview page
<button @click="toPdf">pdf</button>
methods: {
toPdf() {
uni.navigateTo({
url: './course/pdf'
})
}
}
Preview page
Key points: 1. The path of 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>