uniapp实现在线PDF文件预览


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

bug:hbuildX创建的项目pdf文件夹可以放在根目录下面,但是cli创建的项目无法预览,只能放在static下面

按钮跳转预览页面

javascript 复制代码
<button @click="toPdf">pdf</button>
	methods: {
		toPdf() {
			uni.navigateTo({
				url: './course/pdf'
			})
		}
	}

预览页面

重点:1、viewerUrl的路径

javascript 复制代码
<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>
相关推荐
halo14161 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
拾荒的小海螺16 小时前
JAVA:探索 PDF 文字提取的技术指南
java·开发语言·pdf
村东头老张16 小时前
Java 实现PDF添加水印
java·开发语言·pdf
赣州云智科技的技术铺子21 小时前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测
好美啊啊啊啊!1 天前
Thymeleaf模板引擎生成的html字符串转换成pdf
pdf·html
Random_index1 天前
#Uniapp篇:变量&v-if 和 v-show 区别&.sync 修饰符&宽屏适配指南&Pinia内置了
uni-app
江湖行骗老中医1 天前
uni-app 修改复选框checkbox选中后背景和字体颜色
开发语言·javascript·uni-app
刚刚好ā1 天前
uni-app跳转外部链接方式汇总--超全
前端·vue.js·uni-app·vue·webview
zhentiya1 天前
曼昆《经济学原理》第八版课后答案及英文版PDF
大数据·pdf
三天不学习1 天前
如何解决pdf.js跨域从url动态加载pdf文档
javascript·pdf