vue项目使用vue-pdf插件预览pdf文件

news2025/1/18 12:03:20

1、安装vue-pdf:npm install --save vue-pdf
2、使用
具体实现代码:pdfPreview.vue

<template>
    <div class="container">
        <pdf
            ref="pdf"
            :src="pdfUrl"
            :page="currentPage"
            :rotate="pageRotate"
            class="pdf-box"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
            @loaded="loadPdfHandler"
        />
        <div class="tool-box">
            <el-button
                type="primary"
                circle
                icon="el-icon-caret-left"
                @click="changePdfPage(0)"
            />
            <span style="margin: 0 20px;">{{ currentPage }} / {{ pageCount }}</span>
            <el-button
                type="primary"
                circle
                icon="el-icon-caret-right"
                @click="changePdfPage(1)"
            />
            <el-button
                type="primary"
                circle
                icon="el-icon-zoom-in"
                @click="scaleD()"
            />
            <el-button
                type="primary"
                circle
                icon="el-icon-zoom-out"
                @click="scaleX()"
            />
            <el-button
                type="primary"
                circle
                icon="el-icon-refresh-left"
                @click="counterClock()"
            />
            <el-button
                type="primary"
                circle
                icon="el-icon-refresh-right"
                @click="clock()"
            />
        </div>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    name: 'PdfPreview',
    components: {
        pdf
    },
    props: {
        pdfUrl: {
            type: String,
            default: () => ''
        },
        sentData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            scale: 100,
            pageRotate: 0,
            tempFileName: '',
            pdfContent: ''
        }
    },
    mounted() { },
    methods: {
    // pdf加载时
        loadPdfHandler(e) {
            e
            this.currentPage = 1 // 加载的时候先加载第一页
        },
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage(val) {
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++
            }
        },
        // 放大
        scaleD() {
            this.scale += 5
            this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        },
        // 缩小
        scaleX() {
            if (this.scale === 100) {
                return
            }
            this.scale += -5
            this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        },
        // 顺时针
        clock() {
            this.pageRotate += 90
        },
        // 逆时针
        counterClock() {
            this.pageRotate -= 90
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;

    img {
        position: absolute;
        right: 20px;
        bottom: 10px;
        width: 40px;
        cursor: pointer;
    }
}

.pdf-box {
    width: 100%;
    height: calc(100% - 56px);
    overflow: scroll;
}

.tool-box {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -164px;
}
</style>

调用:
在这里插入图片描述
效果图:
在这里插入图片描述

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

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

相关文章

AJAX(二)jQuery

一、jQuery中的AJAX BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 我们将该链接引入get.html文件里面&#xff1a; service.js: //1.引入express const expressrequire(express); //2.创建应用对象 const appexpress(); //3.创建路由规则 //request是对请求报文的封…

Vue知识总结-上

VUE初识 Vue是一套用于构建用户界面的渐进式(由只需要轻量小巧的核心库构建的简单应用逐渐扩展为可以引入各式各样的Vue组件构建的复杂应用)JavaScript框架 Vue需掌握的内容&#xff1a;Vue基础、Vue-cli、vue-router、vuex、element-ui、vue3 Vue特点 采用组件化模式、提高代…

Qt界面篇:Qt停靠控件QDockWidget、树控件QTreeWidget及属性控件QtTreePropertyBrowser的使用

1、功能介绍 本篇主要使用Qt停靠控件QDockWidget、树控件QTreeWidget及Qt属性控件QtTreePropertyBrowser来搭建一个简单实用的主界面布局。效果如下所示。 2、控件使用详解 2.1 停靠控件QDockWidget QDockWidget可以停靠在 QMainWindow 内或作为桌面上的顶级窗口浮动。默认值…

基于ssm校园线上订餐系统的设计与实现论文

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…

Spring的IOC解决程序耦合

目录 1.创建工程 1.1.pom.xml 1.2.dao 1.3.service 2.IOC 2.1.applicationContext.xml 2.2.测试 3.DI 3.1.构造函数注入 3.2.set方法注入 3.3.自动注入 3.4.注入集合类型的属性 1.创建工程 1.1.pom.xml <?xml version"1.0" encoding"UTF-8&qu…

购物新境界——亚马逊鲲鹏系统用户分享

最近我们收到了许多用户的反馈&#xff0c;特此分享一些用户的使用心得&#xff0c;让更多人了解这一创新的购物利器。 1. 定制化的购物习惯设置 许多用户纷纷赞叹我们系统的自动下单功能&#xff0c;并特别强调了可以根据自己购物习惯进行的个性化设置。这项功能使得购物过程…

WinCC中的画面模板应用实例及其组态实现方法

一、 画面模板的意义引文&#xff1a;博途工控人平时在哪里技术交流博途工控人社群 在实际工程应用和WinCC画面组态中&#xff0c;经常会遇到一些功能类似&#xff0c;画面布局基本没差别的情况。比如&#xff0c;电机的启停控制和动态数据监控画面&#xff0c;如图1所示。一个…

拼题A 跨年挑战赛 2024 赛后提交入口 + 题目 + 题解

想再提交一遍&#xff1f;点击进入 拼题A教育超市 周三&#xff0c;搞学长&#xff1a;“小柳进前十了&#xff01;想要奖品过来拿&#xff01;” 等了好几天的比赛结果终于出来了&#xff0c;四年来的跨年挑战赛第一次做满分&#xff0c;第一次进前十&#xff01;&#xff0…

福建科立讯通信 指挥调度管理平台 多处文件上传漏洞复现

0x01 产品简介 福建科立讯通信指挥调度管理平台是一个专门针对通信行业的管理平台。该产品旨在提供高效的指挥调度和管理解决方案,以帮助通信运营商或相关机构实现更好的运营效率和服务质量。该平台提供强大的指挥调度功能,可以实时监控和管理通信网络设备、维护人员和工作任…

剧本杀小程序/APP搭建,增加玩家游戏体验

近年来&#xff0c;剧本杀游戏成为了年轻人娱乐的新方式&#xff0c;受到了年轻人的追捧。 剧本杀是一种新型的社交游戏&#xff0c;在游戏中&#xff0c;玩家不仅可以进行角色扮演&#xff0c;也能够交到好友&#xff0c;符合当下年轻人的生活模式。 小程序、app是当下剧本杀…

Parallels虚拟机启动后,Mac主机无法上网怎么办

文章目录 1.问题2.解决 1.问题 部分用户在运行Parallels Desktop的Windows 11打开后&#xff0c;Windows上网没有问题 &#xff0c;但是Mac主机不能访问带域名的网站&#xff0c;而访问带ip的网站没问题&#xff0c;退出parallels虚拟机以后&#xff0c;mac网络恢复正常。 2.…

无法到达所选择的在线目标(博途PLC连接不上)

第1步&#xff1a;首先需要检查的就是PLC的物理连接了&#xff0c;可以利用PING工具测试下电脑和PLC是否在同一个网段&#xff0c; 第2步就是检查下防火墙设置 1、防火墙设置 2、关闭防火墙 未完....

我的效率自救之路:对低效的会议说“不!”

&#xff08;小剧场&#xff1a;某天午饭时间&#xff09; “最近怎么有这么多会议&#xff01;上午开了两个小时的会&#xff0c;需求又做不完了 。” “别提了&#xff0c;我今天排了三个会&#xff0c;根本没时间处理其他工作&#xff0c;还不知道几点能下班呢……” 根据微…

【git使用】了解三种git commit合并的使用场景(rebase、merge、cherry-pick)

参考 【Git学习笔记】逃不掉的merge和rebase-腾讯云开发者社区-腾讯云git merge 和 git rebase - 知乎git cherry-pick 教程 - 阮一峰的网络日志 简单理解各种合并的方法 线性合并&#xff0c;使用 rebase —— feature 分支开发&#xff0c;提交前拉取 master 最新改动进行…

【计算机毕业设计】SSM毕业设计管理系统

项目介绍 用户角色包含以下功能&#xff1a; 查看通知公告,登录,登录后学生主页面,选择课题,选择课题后状态为等待老师去人状态,填写开题报告,提交中期检查,提交免答辩申请,上传论文等功能。 教师角色包含以下功能&#xff1a; 教师角色登录,教师首页,申报课题,审批学生选题,…

rn start

expo init project 只有 typescript文件才有提示 导入提示-> 导入过的才有提示 第一次导入不会有 ‘快速导入’ 找不到模块提示 需要配置tsconfig alias setting https://medium.com/ruan.azevedo/typescript-path-alias-in-react-native-expo-without-babel-plugin-module-…

iOS苹果和Android安卓测试APP应用程序的差异

Hello大家好呀&#xff0c;我是咕噜铁蛋&#xff01;我们经常需要关注移动应用程序的测试和优化&#xff0c;以提供更好的用户体验。在移动应用开发领域&#xff0c;iOS和Android是两个主要的操作系统平台。本文铁蛋讲给各位小伙伴们详细介绍在App测试中iOS和Android的差异&…

【QML】与 C++ 混合编程:互相调用函数

文章目录 qml 调用 C 函数案例 a&#xff1a;Q_INVOKABLE 标记 C 函数 视图设置进 qml 属性案例 b&#xff1a;qml 通过发送信号的方式&#xff0c;调用 Qt 槽函数 C调用qml函数 qml 调用 C 函数 qml 要使用 C 的函数有两个方法&#xff1a; 一种是&#xff0c;用 Q_INVOKABLE…

人工智能_机器学习089_DBSCAN聚类案例_DBSCAN聚类算法效果展示_使用轮廓系数来评分DBSCAN效果---人工智能工作笔记0129

dbscan = DBSCAN(eps = 0.2,min_samples =3) 我们指定半径是0.2 然后每个圆圈至少是3个数据就可以归为一类 dbscan.fit(X) 然后进行训练 # 得到每个样本的标签,分类结果 y_ =dbscan.labels_ 然后得到结果 ,注意这里不需要进行predict,因为fit直接就相当于分类了 plt.scatte…

Linux_CentOS_7.9_MySQL_5.7配置数据库服务开机自启动之简易记录

前言&#xff1a; 作为运维保障&#xff0c;都无法准确预估硬件宕机的突发阶段&#xff0c;其生产数据实时在产出&#xff0c;那作为dba数据库服务的其重要性、必要性就突显而出。这里拿虚拟机试验做个配置记录&#xff0c;便于大家学习参考。 # 如出现服务器重启后登入报错无…