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

【vue-pdf】PDF文件预览插件

1 插件安装

npm install vue-pdf

vue-pdf GitHub:https://github.com/FranckFreiburger/vue-pdf#readme

参考文档:https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

catch报错:vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)_你看我像是会的样子吗?的博客-CSDN博客

2 代码示例

Example.01 超简单分页预览

<template><div class="container"><div class="header"><van-nav-bartitle="文件预览"left-text="关闭"left-arrow@click-left="returnTo"/></div><div class="main"><pdf:src="src":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"></pdf></div><div class="footer"><van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/></div></div>
</template>
<script>import pdf from 'vue-pdf'// 引入apiimport { getItemDetailAPI } from '@/api'export default {name: 'PreView',components: {pdf},data () {return {file_id: '',src: '',currentPage: 0, // pdf文件页码pageCount: 0 // pdf文件总页数}},created () {this.file_id = this.$route.query.item_id// this.fetchFileDetail()this.src = '/files/xxxx.pdf' // 本地测试版},methods: {returnTo () {// this.$router.go(-1)this.$router.back() // 返回},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) {// console.log(val)if (val === 0 && this.currentPage > 1) {this.currentPage--// console.log(this.currentPage)}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++// console.log(this.currentPage)}},// pdf加载时loadPdfHandler (e) {this.currentPage = 1 // 加载的时候先加载第一页},// 根据fileId获取文件async fetchFileDetail () {/** 文件地址 **/// this.src = `/hbdjv1/files/${this.file_name}` // 发布版// this.src = `/files/${this.file_name}` // 本地测试版const params = {file_id: this.file_id}this.$toast.loading({ // 打开toast提示message: '加载中...',forbidClick: true,loadingType: 'spinner',duration: 0})console.log('=====文件详情===')console.log(params)const res = await getItemDetailAPI(params)this.$toast.clear() // 关闭toastif (res && res.code === 200) {if (res.data && res.data.length > 0) {this.src = res.data[0].url}}}}}
</script>

Example.02 少于20页滚动预览,多于20分页预览

<template><div class="container"><div class="header"><van-nav-bartitle="文件预览"left-text="关闭"left-arrow@click-left="returnTo"/></div><div class="main" v-if="loaded"><!-- 页数 <= 20 直接滑动 --><div v-show="pageCount <= divider "><pdf v-for="index in pageCount" :key="index" :src="src" :page="index"></pdf></div><!-- 页数 > 20 分页 --><div v-show="pageCount > divider"><pdf:src="src":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"></pdf></div></div><div class="footer" v-show="pageCount > divider" v-if="loaded"><van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/></div><van-empty description="文件加载失败" v-else/></div>
</template>
<script>import pdf from 'vue-pdf'// 引入apiimport { getItemDetailAPI } from '@/api'export default {name: 'PreView',components: {pdf},data () {return {file_id: '',src: '',currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数divider: 20, // 设置分割数loaded: false}},created () {this.file_id = this.$route.query.item_idthis.fetchFileDetail()},methods: {returnTo () {// this.$router.go(-1)this.$router.back() // 返回},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) {// console.log(val)if (val === 0 && this.currentPage > 1) {this.currentPage--// console.log(this.currentPage)}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++// console.log(this.currentPage)}},// pdf加载时loadPdfHandler (e) {this.currentPage = 1 // 加载的时候先加载第一页},// 根据fileId获取文件async fetchFileDetail () {/** 文件地址 **/// this.src = `/hbdjv1/files/${this.file_name}` // 发布版// this.src = `/files/${this.file_name}` // 本地测试版const params = {file_id: this.file_id}this.$toast.loading({ // 打开toast提示message: '加载中...',forbidClick: true,loadingType: 'spinner',duration: 0})console.log('=====文件详情===')console.log(params)const res = await getItemDetailAPI(params)this.$toast.clear() // 关闭toastif (res && res.code === 200) {if (res.data && res.data.length > 0) {// this.src = res.data[0].urlthis.src = pdf.createLoadingTask(res.data[0].url)this.src.promise.then(pdf => {this.$nextTick(() => {this.pageCount = pdf.numPages // pdf总页数this.loaded = true})})}}}}}
</script>

相关文章:

【vue-pdf】PDF文件预览插件

1 插件安装 npm install vue-pdf vue-pdf GitHub&#xff1a;https://github.com/FranckFreiburger/vue-pdf#readme 参考文档&#xff1a;https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html catch报错&#xff1a;vue-pdf组件报错vue-pdf Cannot read properti…...

Flink集群运行模式--Standalone运行模式

Flink集群运行模式--Standalone运行模式 一、实验目的二、实验内容三、实验原理四、实验环境五、实验步骤5.1 部署模式5.1.1 会话模式&#xff08;Session Mode&#xff09;5.1.2 单作业模式&#xff08;Per-Job Mode&#xff09;5.1.3 应用模式&#xff08;Application Mode&a…...

Spring整合JUnit实现单元测试

Spring整合JUnit实现单元测试 一、引言 在软件开发过程中&#xff0c;单元测试是保证代码质量和稳定性的重要手段。JUnit是一个流行的Java单元测试框架&#xff0c;而Spring是一个广泛应用于Java企业级开发的框架。本文将介绍如何使用Spring整合JUnit实现单元测试&#xff0c…...

Spring Boot学习路线1

Spring Boot是什么&#xff1f; Spring Boot是基于Spring Framework构建应用程序的框架&#xff0c;Spring Framework是一个广泛使用的用于构建基于Java的企业应用程序的开源框架。Spring Boot旨在使创建独立的、生产级别的Spring应用程序变得容易&#xff0c;您可以"只是…...

管理类联考——写作——论说文——实战篇——标题篇

角度3——4种材料类型、4个立意对象、5种写作态度 经过审题立意后&#xff0c;我们要根据我们的立意&#xff0c;确定一个主题&#xff0c;这个主题必须通过文章的标题直接表达出来。 标题的基本要求 主题清晰&#xff0c;态度明确 第一&#xff0c;阅卷人看到一篇论说文的标…...

idea中设置maven本地仓库和自动下载依赖jar包

1.下载maven 地址&#xff1a;maven3.6.3 解压缩在D:\apache-maven-3.6.3-bin\apache-maven-3.6.3\目录下新建文件夹repository打开apache-maven-3.6.3-bin\apache-maven-3.6.3\conf文件中的settings.xml编辑&#xff1a;新增本地仓库路径 <localRepository>D:\apache-…...

前缀和差分

前缀和 前缀和&#xff1a;一段序列里的前n项和 给出n个数&#xff0c;在给出q次问询&#xff0c;每次问询给出L、R&#xff0c;快速求出每组数组中一段L至R区间的和 给出一段数组&#xff0c;每次问询为求出l到r区间的和 普通方法&#xff1a;L到R进行遍历&#xff0c;那么…...

Golang GORM 模型定义

模型定义 参考文档&#xff1a;https://gorm.io/zh_CN/docs/models.html 模型一般都是普通的 Golang 的结构体&#xff0c;Go的基本数据类型&#xff0c;或者指针。 模型是标准的struct,由Go的基本数据类型、实现了Scanner和Valuer接口的自定义类型及其指针或别名组成&#x…...

微服务的各种边界在架构演进中的作用

演进式架构 在微服务设计和实施的过程中&#xff0c;很多人认为&#xff1a;“将单体拆分成多少个微服务&#xff0c;是微服务的设计重点。”可事实真的是这样吗&#xff1f;其实并非如此&#xff01; Martin Fowler 在提出微服务时&#xff0c;他提到了微服务的一个重要特征—…...

使用 docker-compose 一键部署多个 redis 实例

目录 1. 前期准备 2. 导入镜像 3. 部署redis master脚本 4. 部署redis slave脚本 5. 模板文件 6. 部署redis 7. 基本维护 1. 前期准备 新部署前可以从仓库&#xff08;repository&#xff09;下载 redis 镜像&#xff0c;或者从已有部署中的镜像生成文件&#xff1a; …...

14-测试分类

1.按照测试对象划分 ①界面测试 软件只是一种工具&#xff0c;软件与人的信息交流是通过界面来进行的&#xff0c;界面是软件与用户交流的最直接的一层&#xff0c;界面的设计决定了用户对设计的软件的第一印象。界面如同人的面孔&#xff0c;具有吸引用户的直接优势&#xf…...

打开域名跳转其他网站,官网被黑解决方案(Linux)

某天打开网站&#xff0c;发现进入首页&#xff0c;马上挑战到其他赌博网站。 事不宜迟&#xff0c;不能让客户发现&#xff0c;得马上解决 我的网站跳转到这个域名了 例如网站跳转到 k77.cc 就在你们部署的代码的当前文件夹下面&#xff0c;执行下如下命令 find -type …...

redis总结

1.redis redis高性能的key-value数据库&#xff0c;支持持久化&#xff0c;不仅仅支持简单的key-value&#xff0c;还提供了list&#xff0c;set&#xff0c;zset&#xff0c;hash等数据结构的存储&#xff0c;支持数据的备份&#xff08;master-slave模式&#xff09; redis&…...

现代C++中的从头开始深度学习:激活函数

一、说明 让我们通过在C中实现激活函数来获得乐趣。人工神经网络是生物启发模型的一个例子。在人工神经网络中&#xff0c;称为神经元的处理单元被分组在计算层中&#xff0c;通常用于执行模式识别任务。 在这个模型中&#xff0c;我们通常更喜欢控制每一层的输出以服从一些约束…...

python怎么实现tcp和udp连接

目录 什么是tcp连接 什么是udp连接 python怎么实现tcp和udp连接 什么是tcp连接 TCP&#xff08;Transmission Control Protocol&#xff09;连接是一种网络连接&#xff0c;它提供了可靠的、面向连接的数据传输服务。 在TCP连接中&#xff0c;通信的两端&#xff08;客户端和…...

java设计模式-观察者模式(jdk内置)

上一篇我们学习了 观察者模式。 观察者和被观察者接口都是我们自己定义的&#xff0c;整个设计模式我们从无到有都是自己设计的&#xff0c;其实&#xff0c;java已经内置了这个设计模式&#xff0c;我们只需要定义实现类即可。 下面我们不多说明&#xff0c;直接示例代码&am…...

秒级体验本地调试远程 k8s 中的服务

点击上方蓝色字体&#xff0c;选择“设为星标” 回复”云原生“获取基础架构实践 背景 在这个以k8s为云os的时代&#xff0c;程序员在日常的开发过程中&#xff0c;肯定会遇到各种问题&#xff0c;比如&#xff1a;本地开发完&#xff0c;需要部署到远程k8s集群&#xff0c;本地…...

CV前沿方向:Visual Prompting 视觉提示工程下的范式

prompt在视觉领域&#xff0c;也越来越重要&#xff0c;在图像生成&#xff0c;作为一种可控条件&#xff0c;增进交互和可控性&#xff0c;在多模态理解方面&#xff0c;指令prompt也使得任务灵活通用。视觉提示工程&#xff0c;已然成为CV一个前沿方向&#xff01; 下面来看看…...

Redis五大基础类型解析

1.String类型 特征&#xff1a;即存储字符串的类型&#xff0c;单个字符串存储量最大不超过512MB 常用业务场景&#xff1a;⽤来存储JSON序列化之后对象 底层编码&#xff1a; int编码 数据结构特点&#xff1a;ptr指针直接指向字符串常量池中对应字符串地址&#xff0c;而…...

在CSDN学Golang云原生(服务网格istio)

一&#xff0c;在Kubernetes上部署istio 在Kubernetes上部署istio&#xff0c;可以按照以下步骤进行&#xff1a; 安装Istio 使用以下命令从Istio官网下载最新版本的Istio&#xff1a; curl -L https://istio.io/downloadIstio | ISTIO_VERSION<VERSION> sh - 其中&…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...