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

1、安装vue-pdf:npm install --save vue-pdf
2、使用

具体实现代码:pdfPreview.vue

javascript 复制代码
<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>

调用:

效果图:

相关推荐
不想有bug的小菜鸟24 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
化作繁星41 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js
码上飞扬10 小时前
Vue.js组件开发:从基础到进阶
vue.js
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
Long_poem14 小时前
【自学笔记】Vue基础知识点总览-持续更新
前端·vue.js·笔记
CPU NULL16 小时前
【2025全网最新最全】前端Vue3框架的搭建及工程目录详解
前端·vue.js·框架·软件工程