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>
相关推荐
CodeCraft Studio27 分钟前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106322 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
Light602 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度
linux·pdf·可观测性·异步队列·plt转pdf·权限治理·进度查询
ftswsfb2 小时前
PDF文件基础-计算机字体
pdf
虎头金猫6 小时前
如何在Linux上使用Docker在本地部署开源PDF工具Stirling PDF:StirlingPDF+cpolar让专业操作像在线文档一样简单
linux·运维·ubuntu·docker·pdf·开源·centos
iOS阿玮9 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
2501_9160137411 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
拓端研究室13 小时前
专题:2025人形机器人、工业机器人、智能焊接机器人、扫地机器人产业洞察报告 | 附158+份报告PDF、数据仪表盘汇总下载
microsoft·机器人·pdf
2501_9159184113 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview