使用vue-pdf插件加载pdf

安装:

// 安装这个版本,其它版本会有千奇百怪的错,这个版本和4.0.0都是可以的
cnpm install vue-pdf@4.2.0// 安装pdfjs-dist
cnpm install pdfjs-dist@2.5.207

使用:

// 我的css样式是pxToRem,友友们使用可能样式会有所差距,自行调
<template><div id="container"><!-- 上一页、下一页 --><div class="right-btn"><!-- 输入页码 --><div class="pageNum"><input v-model.number="currentPage"type="number"class="inputNumber"@input="inputEvent()"></div><div @click="changePdfPage('first')"class="turn">首页</div><!-- 在按钮不符合条件时禁用 --><div @click="changePdfPage('pre')"class="turn-btn":style="currentPage===1?'cursor: not-allowed;':''">上一页</div><div @click="changePdfPage('next')"class="turn-btn":style="currentPage===pageCount?'cursor: not-allowed;':''">下一页</div><div @click="changePdfPage('last')"class="turn">尾页</div></div><div class="pdfArea"><pdf :src="src"ref="pdf"@loaded="loadPdfHandler"v-show="loadedRatio===1":page="currentPage"@num-pages="pageCount=$event"@progress="loadedRatio = $event"@page-loaded="currentPage=$event"@link-clicked="currentPage = $event"style="display: inline-block;width:100%"id="pdfID"></pdf></div><!-- 加载未完成时,展示进度条组件并计算进度 --><div class="progress"v-show="loadedRatio!==1"><el-progress type="circle":width="70"color="#53a7ff":percentage="Math.floor(loadedRatio * 100)"></el-progress><br><!-- 加载提示语 --><span>{{remindShow}}</span></div></div>
</template><script>
import pdf from 'vue-pdf'
export default {name: 'pdf-view',components: {pdf},data () {return {// ----- loading -----remindText: {loading: '加载文件中,文件较大请耐心等待...',refresh: '若卡住不动,可刷新页面重新加载...'},remindShow: '加载文件中,文件较大请耐心等待...',intervalID: '',// ----- vuepdf -----// src静态路径: /static/xxx.pdf// src服务器路径: 'http://.../xxx.pdf'src: 'https://sever.superzou.vip/o5CFL5N8kXpGFK746DlnU4Bb5z2R92MN/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231017163845.pdf',// 当前页数currentPage: 0,// 总页数pageCount: 0,// 加载进度loadedRatio: 0}},created () {this.prohibit()},destroyed () {// 在页面销毁时记得清空 setIntervalclearInterval(this.intervalID)},mounted () {// 更改 loading 文字const _that = thisthis.intervalID = setInterval(() => {_that.remindShow === _that.remindText.refresh? _that.remindShow = _that.remindText.loading: _that.remindShow = _that.remindText.refresh}, 4000)// 监听滚动条事件this.listenerFunction()},methods: {// 监听滚动条事件listenerFunction (e) {document.getElementById('container').addEventListener('scroll', () => {}, true)},// 页面回到顶部toTop () {document.getElementById('container').scrollTop = 0},// 输入页码时校验inputEvent () {if (this.currentPage > this.pageCount) {// 1. 大于maxthis.currentPage = this.pageCount} else if (this.currentPage < 1) {// 2. 小于minthis.currentPage = 1}},// 切换页数changePdfPage (val) {if (val === 'pre' && this.currentPage > 1) {// 切换后页面回到顶部this.currentPage--this.toTop()} else if (val === 'next' && this.currentPage < this.pageCount) {this.currentPage++this.toTop()} else if (val === 'first') {this.currentPage = 1this.toTop()} else if (val === 'last' && this.currentPage < this.pageCount) {this.currentPage = this.pageCountthis.toTop()}},// pdf加载时async loadPdfHandler (e) {// 加载的时候先加载第一页this.currentPage = 1},// 禁用鼠标右击、F12 来禁止打印和打开调试工具prohibit () {// console.log(document)document.oncontextmenu = function () {return false}document.onkeydown = function (e) {if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e.keyCode === 117)) {return false}if (e.keyCode === 18 || e.keyCode === 123) {return false}}}}
}
</script><style lang="scss" scoped>
#container {overflow: auto;height: 800px;font-family: PingFang SC;width: 100%;display: flex;/* justify-content: center; */position: relative;
}/* 右侧功能按钮区 */
.right-btn {position: fixed;right: 5%;bottom: 20%;width: 60px;display: flex;flex-wrap: wrap;justify-content: center;z-index: 99;
}.pdfArea {width: 80%;
}/* ------------------- 输入页码 ------------------- */
.pageNum {margin: 10px 0;font-size: 7px;
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type='number'] {-moz-appearance: textfield;
}.inputNumber {border-radius: 8px;border: 1px solid #999999;height: 16px;font-size: 7px;width: 60px;text-align: center;
}
.inputNumber:focus {border: 1px solid #00aeff;background-color: rgba(18, 163, 230, 0.096);outline: none;transition: 0.2s;
}/* ------------------- 切换页码 ------------------- */
.turn {background-color: #888888;opacity: 0.7;color: #ffffff;height: 35px;width: 35px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 2px 0;font-size: 7px;
}.turn-btn {background-color: #000000;opacity: 0.6;color: #ffffff;height: 35px;width: 35px;border-radius: 50%;margin: 2px 0;display: flex;align-items: center;justify-content: center;font-size: 7px;
}.turn-btn:hover,
.turn:hover {transition: 0.3s;opacity: 0.5;cursor: pointer;
}/* ------------------- 进度条 ------------------- */
.progress {position: absolute;right: 50%;top: 50%;text-align: center;
}
.progress > span {color: #199edb;font-size: 14px;
}
</style>

报错: 

这样执行会报一个catch的错误,然后找到node_modules下面的vue-pdf目录src文件下面的pdfjsWrapper.js文件中,第197行的catch注释掉就好。

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

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

相关文章

HCIP之BGP联邦实验

华子目录 实验拓扑及要求规划网段和IP地址实验步骤配置IP地址先让IGP通建BGP邻居修改ospf下环回接口网络类型修改联邦之间的最大跳数每台运行BGP的路由器批量宣告路由修改本地下一跳测试 实验拓扑及要求 规划网段和IP地址 实验步骤 配置IP地址 r1配置&#xff0c;依次类推 […

什么叫单位矩阵?

单位矩阵&#xff08;Identity Matrix&#xff09;是一个特殊的方阵&#xff0c;其主对角线上的元素全为1&#xff0c;而其他元素全为0。单位矩阵通常用符号 I 或 E 表示。 一个nn 的单位矩阵的表示形式如下&#xff1a; 其中&#xff0c;主对角线上的元素全为1&#xff0c;…

C/Cxx-面向对象中Message的概念

在Programming Abstractions in C pp.129遇到了面向对象中messages这个概念&#xff1a; “In the object-oriented world, objects communicate by sending information and requests from one object to another. Collectively, these transmissions are called messages. Th…

Unity New Input System 及其系统结构和源码浅析【Unity学习笔记·第十二】

转载请注明出处&#xff1a;&#x1f517;https://blog.csdn.net/weixin_44013533/article/details/132534422 作者&#xff1a;CSDN|Ringleader| 主要参考&#xff1a; 官方文档&#xff1a;Unity官方Input System手册与API官方测试用例&#xff1a;Unity-Technologies/InputS…

「优选算法刷题」:在排序数组中查找元素的第一个和最后个位置

一、题目 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 1&a…

springcloud alibaba sentinel熔断降级

简介 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。 sentinel相当于hystrix的升级版&#xff0c;加入了web界面&#xff0c;能够实时在线的改变流…

小微企业科技创新之策略:人才、投入、模式、技术、支持四管齐下

对于小微企业来说&#xff0c;搞科技创新需要从多个方面入手。以下是一些可供参考的方法&#xff1a; 明确创新方向&#xff1a;首先&#xff0c;企业需要明确自己的创新方向和目标&#xff0c;这有助于聚焦资源&#xff0c;避免盲目投入。同时&#xff0c;企业需要对市场进行…

【2024开年必备】最全面的Macbook/苹果电脑必备实用软件推荐

刚刚入手Macbook/苹果电脑需要安装哪些软件呢&#xff1f;越来越多的人使用 Mac&#xff0c;各种功能、各式各样的 Mac 软件也是五花八门。刚拿到 Mac 的小伙伴们可能会有点迷茫&#xff0c;今天就帮大家分类整理一些装机必备好用的 App&#xff0c;希望可以帮助到大家&#xf…

leetcode:最接近的三数之和---(双指针,排序,数组)

题目&#xff1a; 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例&#xff1a; 示例 1&#xff1a; 输入&#xff1a;nums [-1…

SpringBoot - SpringBoot手写模拟SpringBoot启动过程

依赖 建一个工程&#xff0c;两个Module: 1. springboot模块&#xff0c;表示springboot框架的源码实现 2. user包&#xff0c;表示用户业务系统&#xff0c;用来写业务代码来测试我们所模拟出来的SpringBoot 首先&#xff0c;SpringBoot是基于的Spring&#xff0c;所以我…

2024最新版Python 3.12.1安装使用指南

2024最新版Python 3.12.1安装使用指南 Installation and Configuration Guide to the latest version Python 3.12.1 in 2024 By Jackson Python编程语言&#xff0c;已经成为全球最受欢迎的编程语言之一&#xff1b;它简单易学易用&#xff0c;以标准库和功能强大且广泛外挂…

使用WAF防御网络上的隐蔽威胁之目录穿越

目录穿越&#xff08;Directory Traversal&#xff09;是一种网络安全攻击手段&#xff0c;也被称为路径穿越。 这种攻击允许攻击者访问存储在Web服务器文件系统上的文件和目录&#xff0c;这些文件和目录原本不应该对用户可见或可访问。 通过利用安全漏洞&#xff0c;攻击者…

Web开发3:数据库使用

欢迎来到Web开发系列的第三篇&#xff01;今天我们将探讨如何在Web开发中使用数据库。数据库是存储和管理数据的重要工具&#xff0c;它在现代应用程序中起着至关重要的作用。无论是社交媒体应用、电子商务平台还是博客网站&#xff0c;数据库都是不可或缺的一部分。 什么是数…

数据库(表的基本操作)

目录 1.1 表的基本操作 1.1.1 创建表 1.1.2 表物理存储结构 1.1.3 数据类型 文本类型&#xff1a; 数字类型&#xff1a; 时间/日期类型&#xff1a; 常用的数据类型&#xff1a; 1.1.4 查看表 SHOW 命令 查看表结构&#xff1a; 1.1.5 删除表 查看表结构&#xf…

[网络编程]UDP协议,基于UDP协议的回显服务器

目录 1.UDP协议介绍 2.UDP协议在Java中的类 2.1DatagramSocket类 2.2DatagramPacket 3.回显服务器 3.1Sever端 3.2Client端 1.UDP协议介绍 UDP协议是一种网络协议&#xff0c;它是无连接的&#xff0c;全双工&#xff0c;并且是面向数据报&#xff0c;不可靠的一种协议…

【UE Niagara】制作传送门_Part2

在上一篇&#xff08;【UE Niagara】制作传送门_Part1&#xff09;基础上继续完成传送门的外层轮廓效果 效果 步骤 1. 打开材质“M_BasicDot_Tans”&#xff0c;添加一个“DepthFade”节点 2. 对材质“M_SubUVMaster_Additive”创建材质实例&#xff0c;这里命名为“M_Portal…

文件传输中的MD5校验技术

1. 文件的MD5校验简介 文件的MD5校验是一种常用的文件完整性验证方法。MD5&#xff08;Message Digest Algorithm 5&#xff09;是一种广泛应用的哈希算法&#xff0c;它能够将任意长度的数据转换为固定长度的哈希值。在文件校验中&#xff0c;MD5算法通过计算文件的哈希值&…

常见的嵌入式面试问题解答!

1.关键字static的作用是什么&#xff1f;为什么static变量只初始化一次&#xff1f; ​1&#xff09;修饰局部变量&#xff1a;使得变量变成静态变量&#xff0c;存储在静态区&#xff0c;存储在静态区的数据周期和程序相同&#xff0c; 在main函数开始前初始化&#xff0c;在…

最新版的Tuxera NTFS 2024 支持macOS 12系统

备受期待的Tuxera NTFS 2024 Mac中文版终于上线了&#xff0c;小编第一时间为您带来&#xff01;Tuxera NTFS 2024 中文版是一款非常好用的NTFS读写工具&#xff0c;可以让您完整的读写兼容NTFS格式驱动器&#xff0c;对磁盘进行访问、编辑、存储和传输文件等。同时还包括开源磁…

C# wpf利用Clip属性实现截屏框

wpf截屏系列 第一章 使用GDI实现截屏 第二章 制作截屏框&#xff08;本章&#xff09; ______第一节 使用DockPanel制作截屏框 ______第二节 利用Clip属性实现截屏框(本节) 第三章 实现截屏框热键截屏 第四章 实现截屏框实时截屏 第五章 使用ffmpeg命令行实现录屏 文章目录 wp…