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

vue——预览PDF

下载插件

npm install --save vue-pdf

创建组件

<template><div class="ins-submit-docs-content ins-submit-docs-pdf"><div v-if="loading" style="position: absolute; top: 40%; width: 100%;text-align: center;"><el-loading type="spinner" color="#fc8955" /></div><el-empty description="文档加载失败" v-if="loadingError" /><div v-show="numPages <= 50"><pdf ref="morePDF" :src="src" :page="i" v-for="i in numPages" :key="i"></pdf></div><div v-show="numPages > 50"><pdf ref="PDF" :src="src" :page="currentPage" @num-pages="numPages=$event" @loaded="loadPdfHandler"></pdf><div class="ins-pdf-button-box"><span @click.stop="prePage">上一页</span><span>{{currentPage}}/{{numPages}}</span><span @click.stop="nextPage">下一页</span></div></div></div>
</template><script>import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';export default {name : 'ins-docs-pdf',props : {src : {type : String,    //默认值,选中值default : ''}},data(){return {loading : true,    //加载中loadingError : false,    //加载失败numPages : 0,        //分页currentPage : 1, //当前显示页数}},watch : {src : {deep : true,immediate: true,handler(val){if(val){this.getPDFnums(val)}}}},components: {pdf},methods:{//计算pdf页码总数getPDFnums(url) {this.loading = true//let loadURL = pdf.createLoadingTask(url)let loadURL = pdf.createLoadingTask({url: url,//你的pdf地址CMapReaderFactory})loadURL.promise.then(pdf => {this.numPages = pdf.numPagesthis.currentPage = 1this.$set(this, 'docsPDF.numPages', pdf.numPages)this.loading = false}).catch(err => {this.loading = false;this.loadingError = true;})},// 上一页prePage() {var page = this.currentPagepage = page > 1 ? page - 1 : this.numPagesthis.currentPage = page},// 下一页nextPage() {var page = this.currentPagepage = page < this.numPages ? page + 1 : 1this.currentPage = page},// 回调loadPdfHandler(e) {this.currentPage = e}}
}
</script><style scoped></style>

父类引用

<el-table-column label="总结报告" align="center" prop="disasterSummarize" min-width="150px" show-overflow-tooltip><template slot-scope="scope"><el-link @click="previewFile('http://localhost:8080' + scope.row.disasterSummarize)">{{ scope.row.disasterSummarize }}</el-link></template>
</el-table-column><script>
import pdf from '@/components/PDF/index'export default {name: "Disaster",data() {return {pdfUrl: '',src: '',//......};},components: {//....pdf},methods: {previewFile (file) {this.src = fileconsole.log(file);// // 有时PDF文件地址会出现跨域的情况,这里最好处理一下// this.src = pdf.createLoadingTask(this.pdfUrl)this.fileOpen = true},//......}
};
</script>

相关文章:

vue——预览PDF

下载插件 npm install --save vue-pdf创建组件 <template><div class"ins-submit-docs-content ins-submit-docs-pdf"><div v-if"loading" style"position: absolute; top: 40%; width: 100%;text-align: center;"><el-l…...

数据库复习

什么是数据库系统 数据库系统是指在计算机系统中引入数据库后构成的系统&#xff0c;一般由数据库、数据库管理系统(及其开发工具)、应用系统、数据库管理员和用户构成 数据库系统的特点是什么&#xff1f; 数据结构化数据的共享性高&#xff0c;冗余度低且易扩充数据独立性高数…...

vscode插件推荐

文章目录前言一、vscode插件推荐&#xff1f;1、 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code2、Auto Close Tag3、Auto Import3、Error Lens4、vscode-icons5、ES7 React/Redux/React-Native snippets6、GitLens — Git supercharged7、JavaScript…...

THUPC2023初赛总结

今天参加了THUPC2023初赛&#xff0c;感觉还行。 比赛本来是11:00-16:00&#xff0c;但出了点问题&#xff0c;比赛延迟了十分钟。 刚开始&#xff0c;我从第一题往后看&#xff0c;寻找简单的题。 过了一会儿&#xff0c;一看排行榜&#xff0c;怎么最后一题全是绿的&#…...

unity知识点小结02

虚拟轴 虚拟轴就是一个数值在-11内的轴&#xff0c;这个数轴上重要的数值就是-1,0和1。当使用按键模拟一个完整的虚拟轴时需要用到两个按键&#xff0c;即将按键1设置为负轴按键&#xff0c;按键2设置为正轴按键。在没有按下任何按键的时候&#xff0c;虚拟轴的数值为0&#xf…...

总线(四)Modbus总线 协议

文章目录Modbus技术背景Modbus OSI分布Moudbus分类通讯过程Moudbus协议通信过程以及报文解析RTU 与 ASCII 收发数据区别Modbus技术背景 Modbus是一种串行通信协议。 1971年&#xff0c;Modicon公司首次退出Modbus协议&#xff0c;ModbusRTU和Modbus ASCII诞生于此。 后来施耐德…...

Cadence Allegro 导出Component Report详解

⏪《上一篇》   🏡《总目录》   ⏩《下一篇》 目录 1,概述2,Component Report作用3,Component Report示例4,Component Report导出方法4.1,方法14,2,方法2B站关注“硬小二”浏览更多演示视频 1,...

程序猿成长之路之密码学篇-DES算法详解

DES的算法实现原理详情请见 https://blog.csdn.net/qq_31236027/article/details/128209185 DES算法密钥获取详情请见 https://blog.csdn.net/qq_31236027/article/details/129224730 编码工具类获取详见 https://blog.csdn.net/qq_31236027/article/details/128579451 DES算法…...

maven生命周期、阶段与默认绑定插件梳理

maven生命周期、阶段与默认绑定插件梳理 CSDN博客 码云源码 1.maven生命周期、阶段与默认绑定插件 序号生命周期lifecycle阶段phase默认绑定插件(链接官网)默认绑定插件(链接maven库)说明1cleancleanmaven-clean-pluginmaven-clean-plugin清理2.1buildvalidate——验证2.2b…...

【数学基础】

文章目录『 第1讲 高等数学预备知识 』1.1 函数的概念与特性函数的四种特性【 重要结论 】1.2 函数的图像直角坐标系下的图像极坐标系下的图像参数方程1.3 常用基础知识【 情报#1 】『 第2讲 数列极限 』2.1 引言2.2 求数列极限【 情报#2 】『 第1讲 高等数学预备知识 』 1.1 …...

网上电子商城的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;21 世纪以来&#xff0c;人类经济高速发展&#xff0c;人们的生活发生了日新月异的变化&#xff0c;特别是计算机的应用及普及到经济和社会生活的各个领域。在消费领域&#xff0c;网上购物已经成为大众所接受的一种新型的消费方式…...

2023thupc总结

A 大富翁 很有意思的题 ∑x∈A∑y∈B[x支配y]−∑x∈A∑y∈B[y支配x]−∑x∈Awx\sum_{x\in A}\sum_{y\in B}[x支配y]-\sum_{x\in A}\sum_{y\in B}[y支配x]-\sum_{x\in A}w_x∑x∈A​∑y∈B​[x支配y]−∑x∈A​∑y∈B​[y支配x]−∑x∈A​wx​ ∑x∈A∑y[x支配y]−∑x∈A∑y[y支…...

【数据库】MySQL数据库基础

目录 1.数据库&#xff1a; 2.数据库基本操作 2.1 MySQL的运行原理 2.2显示数据库&#xff1a; 2.3创建数据库 2.4使用数据库 2.5删除数据库 3.常见的数据类型 3.1数值类型&#xff1a; 3.2字符型类型 3.3日期类型 4.表的操作 4.1创建表 4.2查看表 4.3删除表 5.汇总…...

grid了解

结构 <div class"grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>&l…...

2023年全国最新工会考试精选真题及答案13

百分百题库提供工会考试试题、工会考试预测题、工会考试真题、工会证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 81.女职工委员会在&#xff08;&#xff09;下开展工作。 A.企业工会委员会领导 B.企业工会委员会指导 …...

初识HTML技术

文章目录一、为什么学习前端?二、第一个HTML文件VSCode三. HTML元素四. HTML页面一、为什么学习前端? 我们作为一个后端程序员&#xff0c;为什么还要学习前端&#xff0c;因为我们的终极目的是实现web开发&#xff0c;搭建网站&#xff0c;网站 前端 后端 比如我们随便…...

我们为什么要用消息队列?

消息队列是系统设计中存在时间最长的中间件之一&#xff0c;从系统有通信需求开始&#xff0c;就产生了消息队列。 消息队列的使用场景 在日常系统设计与实现的过程中&#xff0c;下面3种场景会涉及到消息队列&#xff1a; 异步处理流量控制服务解耦 异步处理 典型的应用场…...

Linux进程控制

进程控制fork函数进程终止退出码常见的退出方式进程等待什么是进程等待&#xff0c;为什么要进程等待阻塞与非阻塞进程替换替换原理替换函数执行系统命令执行自己写的程序模拟实现简易的shellfork函数 fork函数是创建一个子进程&#xff0c;之前用过。 #include <unistd.h…...

PMP项目管理引论介绍

目录1. 指南概述和目的1.1 项目管理标准1.2 道德与专业行为规范2 基本要素2.1 项目2.2 项目管理的重要性2.3 项目、项目集、项目组合以及运营管理之间的关系2.3.1 概述2.3.2. 项目组合与项目集管理2.3.3. 运营管理2.3.4. 组织级项目管理和战略2.3.5. 项目管理2.3.6. 运营管理与…...

计算机视觉废钢堆提取问题

计算机视觉废钢堆提取问题 背景介绍 在钢铁炼制中&#xff0c;废钢是非常重要的原料&#xff0c;不同等级废钢对于钢成品影响很大&#xff0c;因此需要对废钢进行正确分类。某废钢料场中&#xff0c;卸料区域布置了多个摄像头&#xff0c;用于拍摄卸料场中废钢堆&#xff0c;…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

实现弹窗随键盘上移居中

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

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...