vue预览PDF文件的方法

1.使用iframe标签预览PDF文件

1.1页面结构 html

 <iframe:src="fileUrl"id="iframeBox"ref="iframeRef"frameborder="0"style="width: 100%; height: 800px"></iframe>

1.2 js代码

export default {data() {return {fileUrl: "test.pdf", //文件路径};}
};

2.使用vue-pdf插件预览PDF文件

2.1 安装依赖

npm install vue-pdf@4.2.0 
建议安装指定版本依赖会解决控制台报错

2.2 注册并引入组件

import pdf from "vue-pdf";
components: {pdf,},

2.3 使用组件展示PDF文件

 //html<divclass="pdf-box"><div class="pdf-tab"><div class="pdf-tab-button"><div class="btn-def btn-pre" @click.stop="prePage">上一页</div><div class="btn-def btn-next" @click.stop="nextPage">下一页</div><div class="btn-def" @click.stop="clock">顺时针</div><div class="btn-def" @click.stop="counterClock">逆时针</div></div><div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div><pdfref="pdf"class="pdf-preview":src="fileUrl":page="pageNum":rotate="pageRotate":style="{ height: customHeight + 'px' }"@num-pages="pageTotalNum = $event"@link-clicked="page = $event"></pdf></div>//jsexport default {data() {return {fileUrl: "", //文件路径pageNum: 1,pageTotalNum: 1,pageRotate: 0,customHeight: 400, // 自定义的PDF预览框高度};},components: {pdf,},methods: {//上一页prePage() {var p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;},// 下一页nextPage() {var p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;},//顺时针clock() {this.pageRotate += 90;},//逆时针counterClock() {this.pageRotate -= 90;}  },
};
//css
.pdf-box {width: 100%;height: 800px;.pdf-tab {width: 100%;height: 800px;display: flex;flex-direction: column;align-items: center;.pdf-tab-button {width: 100%;display: flex;align-items: center;justify-content: space-around;.btn-def {width: 98px;height: 40px;line-height: 40px;text-align: center;color: #fff;background-color: #409eff;border-color: #409eff;border-radius: 5px;font-size: 18px;}}.page-size {width: 100%;display: flex;align-items: center;justify-content: center;font-size: 18px;}}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Electron + GitHub Actions | 自动化流程详解(下)

自动化部署 上篇介绍了 Electron Forge 打包应用教程。在实际开发中&#xff0c;自动化是提升效率和产出质量的关键。本篇我们将详细介绍如何将构建和发布 Electron 应用的过程自动化。 代码挂在 GitHub 仓库上&#xff0c;如果有帮助&#xff0c;记得给仓库点个赞&#xff1a…

MQTT学习(一)

MQTT是一种与HTTP类似的应用层协议。 在某些物联网应用中&#xff0c;MQTT优于HTTP。 首先&#xff0c;HTTP是用于客户端服务器计算的以文档为中心的请求-响应协议。 HTTP是万维网的基础&#xff0c;但它不是专门为机器之间通信而设计的。 MQTT是一种机器对机器、以数据为中…

机器学习在数据分析中的应用:探索未来趋势

引言 数据分析是机器学习应用最广泛和最成熟的领域之一。随着大数据时代的到来&#xff0c;企业和组织正越来越多地利用机器学习技术来从海量数据中提取有价值的洞察。在本博客中&#xff0c;我们将探讨机器学习在数据分析中的几个关键方向、场景和应用实例。 数据分析的方向…

Flutter for Web:跨平台移动与Web开发的新篇章

Flutter是Google推出的一款开源的UI工具包&#xff0c;用于构建高性能、高保真度的跨平台应用程序。Flutter最初专注于移动平台&#xff0c;但随着Flutter for Web的推出&#xff0c;它也扩展到了Web开发领域。本文将深入解析Flutter for Web的架构、核心概念、开发流程、性能优…

ALOHA多相机Realsense配置以及数据采集

简介 在诸多模仿学习的工作中&#xff0c;均使用到多个Realsense相机作为数据输入端。本文探讨多个Realsense的ros节点启动。 环境配置 librealsense realsense_ros#python h5py opencv-python多相机启动 ALOHA工程仅需要彩色图像进行输入。因此需要只保留彩色图像&#xf…

树与图的一些计数问题(图论学习总结部分内容)

文章目录 前言七、树与图的一些计数问题&#xff08;偏数学&#xff09;容斥原理知识点例题 e g 1 : eg1: eg1: 完全子图染色问题 e g 2 : eg2: eg2: D A G DAG DAG计数 生成树计数知识点例题 环计数问题练习题 前言 由于图论学习总结内容过多&#xff0c;全放在一篇博客过于…

QLineEdit文本长度和框宽度的比较问题

开发环境 操作系统: 银河麒麟V10SP1qt版本 : 5.12.12背景 测试同事提出,QLineEdit中设置的占位符(由setPlaceholderText函数设置)文本能完全显示时不要显示tips,不完全显示时要显示tips,这样显得简洁。 想了想逻辑上比较好实现,那就是占位符文本长度大于QLineEdit宽度就显示…

Python pyqtgraph库:高效可视化数据的利器

更多Python学习内容&#xff1a;ipengtao.com 在数据科学和工程领域&#xff0c;数据可视化是一项非常重要的任务。Python pyqtgraph库是一个功能强大的数据可视化工具&#xff0c;可以帮助用户快速、高效地可视化各种类型的数据&#xff0c;包括实时数据、大数据集和3D数据等。…

PostgreSQL-常用函数和操作符-2

0. WITH 在 PL/pgSQL 中&#xff0c;WITH 子句通常用于创建一个临时结果集&#xff0c;这个结果集在执行 SQL 查询时使用。这个临时结果集通常被称为一个公共表表达式&#xff08;Common Table Expression, CTE&#xff09;。CTE 允许您在查询中引用它&#xff0c;就像引用一个…

Kerberos-梳理

服务端: yuminstall-ykrb5-server vim/var/kerberos/krb5kdc/kdc.conf [kdcdefaults] kdc_ports=88 kdc_tcp_ports=88 [realms] HADOOP.COM={#master_key_type=aes256-cts acl_file=/var/kerberos/krb5kdc/kadm5.acl dict_file=/usr/share/dict/words admin_keytab=/var/kerbe…

英伟达解码性能NVDEC

如果你能打开官网&#xff0c;请看这里&#xff1a; NVDEC Application Note 下面是摘录&#xff1a;

STL---排序模板参数

map 对map进行排序 首先一定要注意map模板类的第三个模板参数&#xff0c;这个参数决定元素按键值升序或者降序在map中的存储方式&#xff1a; 默认&#xff1a;less<key>升序----- < -----第一个小于取第一个 可设置&#xff1a;greater<key>降序-------…

VC 编程开发中的 封装类 :log日志类 和SQL server 操作类 源代码

VC 编程开发中的 封装类 &#xff1a;日志类 和SQL server 操作类 源代码 在VC&#xff08;Visual C&#xff09;开发中&#xff0c;日志文件输出是一个至关重要的环节&#xff0c;它对于程序调试、问题排查以及系统监控等方面都具有不可替代的作用。以下是对日志文件输出在VC开…

ASP.NET仪器设备管理系统设计与实现

摘 要 文中以某中小型企业的设备管理为例&#xff0c;对设备管理系统的设计与应用进行研究&#xff0c;旨在通过设备管理系统提高内部设备的利用率及实现其最大的经济效益。文中首先对设备管理的现状及其重要性进行了分析&#xff0c;分析实现设备管理信息系统的必要性与可行…

如何在windows server下安装mysql5.7数据库,并使用Navicat Premium 15可视化工具新建数据库并读取数据库信息。

如何在windows server下安装mysql5.7数据库&#xff1f; MySQL :: Download MySQL Community Server (Archived Versions)https://downloads.mysql.com/archives/community/点击↑&#xff0c;然后选择对应版本和平台↓下载 将下载后的安装包放入固定目录&#xff08;这里以D:…

AI学习指南概率论篇-随机变量和随机过程

AI学习指南概率论篇-随机变量和随机过程 随机变量和随机过程是概率论中重要的概念&#xff0c;也是在人工智能领域中经常应用的概念。本文将介绍随机变量和随机过程的概述&#xff0c;它们在AI中的使用场景&#xff0c;定义和意义&#xff0c;以及相关的公式讲解&#xff0c;并…

蓝桥杯备战17.bitset砝码称重

P2347 [NOIP1996 提高组] 砝码称重 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) bitset 用来存储二进制 #include<bits/stdc.h> using namespace std; #define endl \n #define int long long const int N 2e510; int w[] {0,1,2,3,5,10,20}; signed main() {std…

电商选品的数据是可以用爬虫进行采集的吗?

在电子商务领域&#xff0c;选品是一个至关重要的环节&#xff0c;它直接影响到商家的销售业绩和市场竞争力。为了做出更明智的选品决策&#xff0c;商家需要获取大量的市场数据和产品信息。那么&#xff0c;电商选品的数据是否可以通过爬虫进行采集呢&#xff1f; 爬虫在电商数…

更适合户外使用的开放式耳机,佩戴舒适音质悦耳,虹觅HOLME NEO体验

随着气温的逐渐升高&#xff0c;不管是在室内工作娱乐&#xff0c;还是到户外运动健身&#xff0c;戴上一款合适的耳机都会帮我们隔绝燥热与烦闷&#xff0c;享受音乐与生活。现在市面上的耳机类型特别多&#xff0c;我很喜欢那种分体式的开放耳机&#xff0c;感觉这种耳机设计…

亚信安慧AntDB:颠覆传统的开放创新数据库生态

亚信安慧AntDB是亚信科技自主研发的一款颠覆传统的开放创新数据库产品。它引入了分布式架构&#xff0c;通过数据的弹性伸缩、 容灾容错和负载均衡等技术手段&#xff0c;实现了高性能、高可靠性和高可扩展性的数据存储和处理能力。不仅如此&#xff0c;亚信安慧 AntDB还具备…