当前位置：首页 > news >正文

uniapp实现在线PDF文件预览

news 来源：原创 2024/5/10 2:12:16

在这里插入图片描述

下载pdf文件放在static文件夹下

bug：hbuildX创建的项目pdf文件夹可以放在根目录下面，但是cli创建的项目无法预览，只能放在static下面
在这里插入图片描述

按钮跳转预览页面

<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 H5window.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].totalPagethis.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>