当前位置: 首页 > 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、绘制热…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...