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

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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp中的导入zzx-calendar日历的使用

需求&#xff1a; 一周的日历&#xff0c;并且可以查看当月的 &#xff0c;下个月的&#xff0c;以及可以一周一周的切换日期 借助&#xff1a;hbuilder插件市场中的zzx-calendar插件库 在父组件中引入 并注册为子组件 <template><zzx-calendar selected-change&qu…

C#编程-实现数组

实现数组 数组是相同数据类型的值得集合。例如,您可以创建存储10个整数类型值的数组。数组中的变量称为数组元素。通过使用单个名称和代表数组中元素位置的索引号来访问数组元素。数组是引用类型的数据类型。下图显示系统内存中的数组结构。 声明数组 在程序中使用数组之前需…

Java中的SPI机制

Java中的SPI&#xff08;Service Provider Interface&#xff09;机制是一种服务发现机制。它允许服务提供者在运行时被发现和加载&#xff0c;而不是在编译时。这种机制主要用于实现解耦&#xff0c;使得接口的定义与实现可以独立变化&#xff0c;增强了系统的可扩展性和可替换…

Windows下MongoDB启动及停止服务

1.CMD黑窗口输入启动命令&#xff1a; net start MongoDB 2.CMD黑窗口输入停止命令&#xff1a; net stop MongoDB

MindSpore Serving与TGI框架 の 对比

一、MindSpore Serving MindSpore Serving是一款轻量级、高性能的服务工具&#xff0c;帮助用户在生产环境中高效部署在线推理服务。 使用MindSpore完成模型训练>导出MindSpore模型&#xff0c;即可使用MindSpore Serving创建该模型的推理服务。 MindSpore Serving包含以…

基于ssm的班级事务管理系统+vue论文

摘 要 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对班级事务信息管理的提升&#x…

FA2016AA (MHz范围晶体单元超小型低轮廓贴片) 汽车

随着科技的不断发展&#xff0c;智能汽车逐渐成为人们出行的首选。而其中&#xff0c;频率范围在19.2 MHz ~ 54 MHz的晶体单元超小型低轮廓贴片&#xff08;FA2016AA&#xff09;为汽车打造更智能、更舒适、更安全的出行体验。FA2016AA贴片的外形尺寸为2.0 1.6 0.5 mm&#x…

跨境电商竞品分析:洞察市场,赢得先机的关键策略

在全球化日益加速的今天&#xff0c;跨境电商已经成为了企业拓展市场、提高销售额的重要手段。然而&#xff0c;跨境电商市场的竞争也日趋激烈&#xff0c;如何在众多竞争对手中脱颖而出&#xff0c;成为每个企业都面临的挑战&#xff1b;想要做到这点&#xff0c;了解竞品情况…

电脑提示找不到mfc140u.dll,无法继续执行代怎么办,mfc140u.dll丢失的解决办法

在使用电脑时&#xff0c;我们常常会遇到各种各样的问题。其中一个比较常见的问题就是“找不到mfc140u.dll,无法继续执行代码”。今天小编主要就围绕这mfc140u.dll这个文件来给大家详细的解析一下吧&#xff0c;让大家更清楚的知道这个问题以及怎么去解决这个问题。接下来一起来…

第10课 利用windows API捕获桌面图像并通过FFmpeg分享

在上一章&#xff0c;我们已经实现了一对一音视频对话功能。在实际应用中&#xff0c;我们常需要把自己的电脑桌面分享给他人以实现桌面共享功能&#xff0c;这种功能在视频会议、在线教学等场景中很常见&#xff0c;这种功能如何实现呢&#xff1f;这节课我们就来解决这个问题…

【响应式编程-03】常见的函数式接口

一、简要描述 使用Lambda的前提 必须有一个函数式接口: 有且只有一个抽象方法的接口 FunctionnalInterface注解 常见的函数式接口 Runnable / CallableSupplier / ConsumerComparatorPredicateFunction 二、代码实现 1、Runnable - RunnableLambda测试类 package tech.flygo.…

CloudCanal x Redis 数据同步指令集丰富与细节优化

简述 CloudCanal 前一段时间支持了 Redis 到 Redis 数据迁移同步能力&#xff0c;并支持其双向同步&#xff0c;但是支持的指令种类有限。 随着用户使用&#xff0c;指令支持不全面成为一个比较大的问题&#xff0c;所以最近的版本&#xff0c;我们对此能力&#xff0c;结合用…

695岛屿最大面积

题目 给定一个 row x col 的二维网格地图 grid &#xff0c;其中&#xff1a;grid[i][j] 1 表示陆地&#xff0c; grid[i][j] 0 表示水域。 网格中的格子 水平和垂直 方向相连&#xff08;对角线方向不相连&#xff09;。整个网格被水完全包围&#xff0c;但其中恰好有一个…

华为交换机如何同时配置多个端口参数

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 华为交换机如何批量配置端口 使用端口组功能可以实现一次配置多个端口,以减少重复配置工作。端口组分为如下两种方式: 永久端口组。如果用户需要多次…

系列三十三、如何将一个springboot jar做成批处理文件

一、将一个springboot jar做成批处理文件 1.1、需求 最近在写【Spring Cloud Alibaba】的系列文章&#xff0c;其中有一个部分是安装Sentinel控制台&#xff0c;使用命令执行完全没有问题&#xff0c;但是命令太长了&#xff0c;每次启动时都要找笔记&#xff0c;然后粘贴到命…

redis报错:Creating Server TCP listening socket 127.0.0.1:6379: bind: No error

Redis启动时报错&#xff1a; Creating Server TCP listening socket 127.0.0.1:6379: bind: No error 这个错误说明已经开启了redis&#xff0c;并且已经占用了端口6379&#xff0c;需要停止redis后再开启。 redis-cli.exeshutdownexitredis-server redis.windows.conf 参考…

面试官:CSS3新增了哪些新特性?

面试官&#xff1a;CSS3新增了哪些新特性&#xff1f; 一、是什么 css&#xff0c;即层叠样式表&#xff08;Cascading Style Sheets&#xff09;的简称&#xff0c;是一种标记语言&#xff0c;由浏览器解释执行用来使页面变得更美观 css3是css的最新标准&#xff0c;是向后兼…

用开源大语言模型开发的智能对话机器人初版原型验证

用开源大语言模型开发的智能对话机器人初版原型验证 0. 背景1. 初版检证效果展示2. 验证效果总结 0. 背景 同事要想做一个智能对话机器人&#xff0c;特别的需求有有些几点&#xff0c; 通过预置提示词&#xff08;包括确认事项&#xff09;&#xff0c;让大语言模型用会话式…

c# 学习笔记 - 枚举

文章目录 1. 枚举1.1 枚举结构梳理1.2 枚举完整代码1.3 枚举知识点补充 2. 迭代两种命名空间接口3. yield语句 1. 枚举 1.1 枚举结构梳理 结构图   上图内容可能依旧不通俗易懂&#xff0c;这里使用最简明的话语告诉大家实现方式. foreach语句就是集合的遍历操作&#xff0c…

Redis 有序集合(sorted set) 命令

目录 1.Redis Zrevrank 命令 - 返回有序集合中指定成员的排名&#xff0c;有序集成员按分数值递减(从大到小)排序简介语法可用版本: > 2.2.0返回值: 如果成员是有序集 key 的成员&#xff0c;返回成员的排名。 如果成员不是有序集 key 的成员&#xff0c;返回 nil 。 示例 2…