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

预览PDF并显示当前页数

这里写目录标题

  • 步骤
  • 实例
  • 实例效果图

步骤

1.安装依赖

npm install --save vue-pdf

2.在需要的页面,引入插件

import pdf from 'vue-pdf'

3.使用
单页pdf可以直接使用

<pdf :src="获取到的pdf地址"></pdf>

多页pdf通过循环实现
html标签部分

<pdf
v-for="item in pageTotal"
:src="pdfUrl"
:key="item"
:page="item">
</pdf>

在mounted函数中 需要调用下述方法 获取pdf的总页数

// 获取pdf总页数
getTotal() {// 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据// 需要使用下述方法的返回值作为urlthis.pdfUrl = pdf.createLoadingTask('获取到的pdf地址')// 获取页码this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
}

此时页面即可正常实现pdf预览

实例

该实例为写公众号嵌入h5页面

需求:预览并且根据当前pdf的高度切换页数(不是根据屏幕高度切换的),返回顶部

<template><divid="top"v-loading="page==pageCount?false:true"element-loading-text="加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"class="box">//当前页数和总页数<spanv-if="page==pageCount"class="pageNum">{{ currentPage }}/{{ pageCount }}</span>//显示所有pdf<VuePdfv-for="i in pageCount"ref="init":key="i":src="pdfSrc":page="i"@num-pages="page=$event"/>//返回顶部<av-if="currentPage>=3"href="#top"class="backTop"><i class="el-icon-caret-top" /></a></div>
</template>
<script>
import VuePdf from 'vue-pdf'
export default {name: 'Detail',components: {VuePdf},data() {return {loading: true,currentPage: 1,page: 1,pageCount: 0,pdfSrc: ''}},mounted() {this.getNumPages()window.addEventListener('scroll', this.handleScroll) // 监听页面滚动},// 滚动重置beforeDestroy() {window.removeEventListener('scroll', this.handleScroll)},methods: {getNumPages() {this.pdfSrc = VuePdf.createLoadingTask(this.$route.query.url)this.pdfSrc.promise.then(pdf => {console.log(pdf)this.pageCount = pdf.numPages}).catch(err => { console.error('pdf 加载失败', err) })},// 获取页面滚动距离handleScroll() {const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopconst height = document.body.scrollHeight / this.pageCountconst num = scrollTop / heightthis.currentPage = Math.ceil(num) === 0 ? 1 : Math.ceil(num)}}
}
</script>
<style scoped>
.box{min-height: 100vh;
}
.pageNum{position:fixed;top:1vh;left:1vh;background:rgba(0,0,0,0.5);padding:1vh 3vh;font-size: 14px;border-radius: 5px;color:#fff;z-index: 1;
}
.backTop{position: fixed;bottom: 4vh;right: 4vh;width: 6vh;height: 6vh;background: #fff;text-align: center;border-radius: 50%;line-height: 6vh;font-size: 20px;font-weight: bold;color: #0a70dd;box-shadow: 0px 0px 10px #ddd;z-index: 9;
}
</style>

实例效果图

在这里插入图片描述

相关文章:

预览PDF并显示当前页数

这里写目录标题 步骤实例实例效果图 步骤 1.安装依赖 npm install --save vue-pdf2.在需要的页面&#xff0c;引入插件 import pdf from vue-pdf3.使用 单页pdf可以直接使用 <pdf :src"获取到的pdf地址"></pdf>多页pdf通过循环实现 html标签部分 &l…...

阿里云优惠券介绍、作用、领取入口及使用教程

阿里云是阿里巴巴集团倾力打造的云计算品牌&#xff0c;提供丰富多样的云计算产品及服务&#xff0c;为了吸引用户&#xff0c;阿里云经常推出各种优惠活动&#xff0c;其中就包括阿里云优惠券的发放。本文将为大家详细介绍阿里云优惠券的作用、领取入口以及使用教程。 一、阿里…...

Shell编程--流程控制

目录 1.条件结构1.1.文件测试(字符串)1.2.字符串比较1.3.数字条件比较1.4.文件条件判断 2.if多条件判断3.case语句 1.条件结构 测试&#xff1a;test 条件 条件为真返回 0&#xff0c;条件为假返回 1 语法&#xff1a;[ 条件 ] test 条件能够理解以下类型的表达式 1.1.…...

设计模式-模板方法模式(Template Method)

设计模式-模板方法模式&#xff08;Template Method&#xff09; 一、模板方法模式概述1.1 什么是模板方法模式1.2 简单实现模板方法模式1.3 使用模板方法模式的注意事项 二、模板方法模式的用途三、模板方法模式实现方式3.1 抽象类中定义模板方法&#xff0c;子类实现具体方法…...

远程登录Linux方法(Linux平台相互远程;Windows远程登录Linux、远程编码、文件传输;无法远程登录的问题解决;c程序的编译)

在实际使用Linux系统过程中我们不可避免的需要远程登录Linux&#xff0c;这是因为未来大家使用Linux服务器的时候你所对应的那台Linux服务器不一定提供界面(服务器可能在外地)。本篇将会介绍远程登录Linux的方法。 文章目录 1. SSH介绍2. Linux平台相互远程及文件传输2.1 Linux…...

macOS 13.6 及后续系统安装 Asahi Linux 将破坏引导

导读Asahi Linux 是一个致力于为 Apple Silicon 设备带来 Linux 支持的项目&#xff0c;日前有用户反馈称&#xff0c;若在相关设备上安装了 macOS 13.6-14&#xff0c;再安装 Asahi Linux &#xff0c;就会导致系统引导失败&#xff0c;出现“黑屏”情况。 目前 Asahi Linux 项…...

Python武器库开发-flask篇之flask框架的安装(二十一)

Flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架&#xff0c;对于Werkzeug本质是Socket服务端&#xff0c;其用于接收http请求并对请求进行预处理&#xff0c;然后触发Flask框架&#xff0c;开发人员基于Flask框架提供的功能对请求进…...

【CASS精品教程】打开cass提示base.dcl未找到文件的解决办法

打开cass 7.1时提示base.dcl未找到文件的解决办法。 文章目录 一、问题描述二、解决办法 一、问题描述 系统上安装了cad2006cass7.1&#xff0c;cass软件可以正常打开&#xff0c;但是在使用屏幕菜单绘制地图时&#xff0c;选择一个工具&#xff0c;提示base.dcl未找到文件&am…...

[vim]Python编写插件学习笔记3 - 命令行参数

0 环境 Windows 11 22H2gVim82 (D:/ProgramFiles/Vim)Python311 (D:/ProgramFiles/Python311)Vundle v0.10.2 阅读本文前&#xff0c;需要先了解前文&#xff1a; 《[vim]Python 编写插件学习笔记1 - 开始》 《[vim]Python 编写插件学习笔记2 - 分离》 1 前提说明 由于本…...

【仙逆】王林400年晋升元婴,复仇藤化元杀尽藤姓,高老畏罪自裁

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料仙逆第10集剧情解析&#xff0c;高启明&#xff0c;缥缈宗的元婴初期老祖&#xff0c;一生潜心研究推演之术&#xff0c;洞察先机&#xff0c;乃是宗门之人的精神支柱。藤化元曾为寻找王林父母所在之…...

云原生实战课大纲

1. 云原生是什么 原生应用&#xff08;java,pyrhon&#xff09; 上云的过程应用上云遇到的问题1.微服务的拆分 微服务的访问关系应用的架构云原生适合什么样的人去学具备什么样的前提条件云原生要学习什么docker k8s devlops server mesh jks k8s监控吧自己的微服务部署上…...

数据湖架构

数据湖架构介绍 数据湖&#xff08;Data Lake&#xff09;是一个存储大量结构化和非结构化数据的集中式数据存储库。 与传统的数据仓库不同&#xff0c;数据湖采用扁平化结构&#xff0c;将数据存储在原始形式下&#xff0c;不需要进行预处理或转化。这使得数据湖能够同时支持…...

Zabbix 5.0部署(centos7+server+MySQL+Apache)

环境 系统IPZABBIX版本主机名centos7192.168.231.2195.0zabbix-server 安装zabbix 我选择版本是zabbix-5.0 zabbix的官网是Zabbix :: The Enterprise-Class Open Source Network Monitoring Solution 安装Zabbix软件源 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/…...

YOLO改进系列之注意力机制(CloAttention模型介绍)

CloAttention来自清华大学的团队提出的一篇论文CloFormer&#xff0c;作者从频域编码的角度认为现有的轻量级视觉Transformer中&#xff0c;大多数方法都只关注设计稀疏注意力&#xff0c;来有效地处理低频全局信息&#xff0c;而使用相对简单的方法处理高频局部信息。很少有方…...

openssl+AES开发实例(linux)

文章目录 一、AES介绍二、AES原理三、AES开发实例 一、AES介绍 AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称密钥加密标准&#xff0c;它是一种对称加密算法&#xff0c;意味着相同的密钥用于加密和解密数据。AES 是 NIST&#xff08;美国国家标准与技…...

FreeRTOS源码阅读笔记3--queue.c

消息队列可以应用于发送不定长消息的场合&#xff0c;包括任务与任务间的消息交换&#xff0c;队列是 FreeRTOS 主要的任务间通讯方式&#xff0c;可以在任务与任务间、中断和任务间传送信息&#xff0c;发送到 队列的消息是通过拷贝方式实现的&#xff0c;这意味着队列存储…...

云原生Kubernetes系列 | 通过容器互联搭建wordpress博客系统

云原生Kubernetes系列 | 通过容器互联搭建wordpress博客系统 通过容器互联搭建一个wordpress博客系统。wordpress系统是需要连接到数据库上的,所以wordpress和mysql的镜像都是需要的。wordpress在创建过程中需要指定一些参数。创建mysql容器时需要把mysql的数据保存在宿主机本…...

java读取OPC DA数据---Utgard

java读取OPC DA数据—Utgard Utgard库已经过时&#xff0c;原作者早已删除库&#xff0c;建议使用OPC UA&#xff0c;兼容OPC DA。 下面讲解Utgard使用 C#和C都不用配置DCOM&#xff0c;直接调用函数 既然是非要用Java&#xff0c;那就别想太方便&#xff0c;需要配置DCOM(后…...

在 Android 上简单安全地登录——使用凭证管理器和密钥

我踏马很高兴地听说&#xff0c; Credential Manager的公开版本将于 11 月 1 日开始提供。Credential Manager 为 Android 带来了身份验证的未来&#xff0c;简化了用户登录应用程序和网站的方式&#xff0c;同时使其更加安全。 登录可能具有挑战性 - 密码经常使用&#xff0c…...

【Python】上市公司数据进行经典OLS回归实操

一、题目二、数据合并、清洗、描述性统计1、数据获取2、数据合并3、选择董监高薪酬作为解释变量的理论逻辑分析 三、多元回归模型的参数估计、结果展示与分析1、描述性统计分析2、剔除金融类上市公司3、对所有变量进行1%缩尾处理4、0-1标准化&#xff0c;所有解释变量5、绘制热…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...