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

小小弯_Shelby

已于 2024-01-04 17:33:15 修改

阅读量1k

点赞数 7

分类专栏： vue 文章标签： vue.js pdf

于 2024-01-04 17:31:02 首次发布

本文链接：https://blog.csdn.net/weixin_44293690/article/details/135391983

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中安装并使用vue-pdf库，展示了一个名为PdfPreview的组件代码，包括PDF页面切换、缩放、旋转等交互功能的实现。

摘要由CSDN通过智能技术生成

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>