uniapp实现在线PDF文件预览

在这里插入图片描述
在这里插入图片描述

下载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 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/126379.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

接口测试|HttpRunner模拟发送GET请求自动生成测试报告

HttpRunner模拟发送GET请求&自动生成测试报告 前面说到&#xff0c;HttpRunner必须使用yaml或者json文件来进行使用&#xff0c;测试场景文件推荐使用yaml文件进行编辑。 httprunner 项目下yaml文件的格式 在python项目下新建一个 testcases 文件夹&#xff0c;然后再新…

K8s----资源管理

目录 一、Secret 1、创建 Secret 1.1 用kubectl create secret命令创建Secret 1.2 内容用 base64 编码&#xff0c;创建Secret 2、使用方式 2.1 将 Secret 挂载到 Volume 中&#xff0c;以 Volume 的形式挂载到 Pod 的某个目录下 2.2 将 Secret 导出到环境变量中 二、Co…

一文概览NLP句法分析:从理论到PyTorch实战解读

本文全面探讨了自然语言处理&#xff08;NLP&#xff09;中句法分析的理论与实践。从句法和语法的定义&#xff0c;到各类句法理论和方法&#xff0c;文章细致入微地解析了句法分析的多个维度。最后&#xff0c;通过PyTorch的实战演示&#xff0c;我们展示了如何将这些理论应用…

【C++】STL容器适配器——queue类的使用指南(含代码使用)(18)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一、queue 类——基本介绍二、queue 类…

Milvus Cloud——Agent 框架工作方式

Agent 框架工作方式 我们以 AutoGPT 为例&#xff0c;看看一个 Agent 框架具体是如何工作的&#xff1a; AutoGPT[2] 使用 GPT-4 来生成任务、确定优先级并执行任务&#xff0c;同时使用插件进行互联网浏览和其他访问。AutoGPT 使用外部记忆来跟踪它正在做什么并提供上下文&am…

(免费领源码)Node.js#koa#MySQL精品课程网站27724-计算机毕业设计项目选题推荐

目 录 摘要 1 绪论 1.1研究背景 1.2研究现状及意义 1.3koa框架 1.4论文结构与章节安排 2精品课程网站系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.3.2数据修改流程 2.3.3数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析…

如何捕捉牛熊转变的信号,澳福认为只需了解一个模式

在过去的交易市场&#xff0c;当所有的多头都买了&#xff0c;没有新的买家时&#xff0c;牛市就结束了。但是在今天的交易市场&#xff0c;激进的卖空者也会出现在趋势的顶部&#xff0c;澳福知道这个事实会改变重要趋势结束时的市场行为。当多头让位于空头时&#xff0c;牛市…

计蒜客详解合集(1)期

以后对于简单题目&#xff0c;大致6道题目出一期&#xff0c;稍有难度的才单独一期发布~ 目录 T1266——出勤记录 T1170——人民币支付 T1122——最长最短单词 T1115——字符串判等 T1116——验证子串 T1118——删除单词后缀 T1266——出勤记录 小蒜的算法课老师每次…

向量的范数、矩阵的范数

向量的范数 p-范数 常用的0-范数、1-范数、2-范数、无穷-范数其实都是p-范数的特殊情形。 0-范数 当p0时&#xff0c;表示0-范数。它比较特殊&#xff0c;本质是一种计数&#xff0c;表示向量中非0元素的个数。 1-范数&#xff08;也称L1范数&#xff09; 当p1时&#xff…

软件开发项目文档系列之十五如何撰写项目结项报告

这是一个项目总结文档的说明文件&#xff0c;它提供了项目的概述、建设情况、技术情况、测试情况、培训情况、试运行情况、主要成效等详细信息。 1 项目概述 项目名称&#xff1a;明确指定了项目的名称&#xff0c;这有助于确保文件的清晰性和易读性。 项目相关单位&#xff…

读写锁ReentrantReadWriteLock

读写锁ReentrantReadWriteLock是JDK1.5提供的一个工具锁&#xff0c;适用于读多写少的场景&#xff0c;将读写分离&#xff0c;从而提高并发性。读写锁允许的情况&#xff1a;一个资源可以被多个读操作访问&#xff0c;或者被一个写操作访问&#xff0c;但两者不能同时进行。 R…

【广州华锐互动】VR安防网络综合布线仿真实训打造沉浸式的教学体验

随着科技的快速发展&#xff0c;综合布线技术在建筑、数据中心、网络基础设施等领域的应用越来越广泛。为了适应这一趋势&#xff0c;传统的教学方法已经无法满足现代教育的需求。因此&#xff0c;采用创新的教学手段&#xff0c;如虚拟现实&#xff08;VR&#xff09;技术&…

【Python 千题 —— 基础篇】菜品的价格

题目描述 题目描述 食堂今天准备了很多好吃的菜。“beef” 12 元一份&#xff1b;“rice” 1 元一份&#xff1b;“fish” 8 元一份&#xff1b;其它菜品 5 元一份。请你根据输入的字符串&#xff0c;使用 if-elif-else 语句判断该菜品需要花费多少钱。 输入描述 输入一个菜…

【被面试官吊打系列】啥,你没说面试要考智力题呀 (上) ?

你好&#xff0c;我是安然无虞。 文章目录 1. 二进制问题分金条问题毒药问题 2. 先手必胜问题轮流拿石子抢30的必胜策略Nim游戏 3. 水桶问题5L和6L的水桶怎么量出3L的水&#xff1f;3L和5L的水桶怎么量出4L的水&#xff1f;一个装了10L水的桶&#xff0c;一个7L的空桶还有一个…

Windows搭建minio存储

minio功能类似以ftp 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.下载软件 https://dl.min.io/server/minio/release/windows-amd64/minio.exe 2.部署配置 我是在D盘下创建了minio目录 minio.exe是软件minio.log是日志&#xff08;不用创建&#xff09;minio900…

借钱正成为互联网一大坑,影响你的房贷,悄悄吞噬消费者

如今各个APP都可以给消费者提供贷款&#xff0c;由于网贷已坑了不少人&#xff0c;许多用户都选择了拒绝&#xff0c;不过APP的另一大坑却在悄悄影响消费者的征信&#xff0c;对消费者包括房贷在内的贷款产生影响。 互联网的这个坑就是先用后付功能&#xff0c;表面上各个APP以…

Node.js中的文件系统(file system)模块

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

GPT-4 Turbo 发布 | 大模型训练的新时代:超算互联网的调度与调优

★OpenAI&#xff1b;ChatGPT;Sam Altman&#xff1b;Assistance API&#xff1b;GPT4 Turbo&#xff1b;DALL-E 3&#xff1b;多模态交互&#xff1b;算力调度&#xff1b;算力调优&#xff1b;大模型训练&#xff1b;GH200&#xff1b;snowflake&#xff1b;AGI&#xff1b;A…

内存条选购注意事项(电脑,笔记本)

电脑内存条的作用、选购技巧以及注意事项详解 - 郝光明的个人空间 - OSCHINA - 中文开源技术交流社区 现在的电脑直接和内存条联系 电脑上的所有输入和输出都只能依靠内存条 现在买双条而不是单条 买两个相同的内存条最好 笔记本先分清是低电压还是标准电压&#xff0c;DD…

java多线程文件下载器

文章目录 1.简介2.文件下载的核心3.文件下载器的基础代码3.1 HttpURLConnection3.2 用户标识 4.下载信息4.1 计划任务4.2 ScheduledExecutorService&#x1f340; schedule方法&#x1f340; scheduleAtFixedRate方法&#x1f340; scheduleWithFixedDelay方法 5.线程池简介5.1…
最新文章