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>
相关推荐
CHB15 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23333 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
阿幸软件杂货间3 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app