使用element 在线预览pdf

最新推荐文章于 2024-07-26 08:30:00 发布

waylonZXH

最新推荐文章于 2024-07-26 08:30:00 发布

阅读量1.6k

点赞数

分类专栏： pdf 在线pdf url预览pdf 文章标签：前端

本文链接：https://blog.csdn.net/waylonZXH/article/details/113241358

版权

pdf 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

在线pdf

1 篇文章 0 订阅

订阅专栏

url预览pdf

1 篇文章 0 订阅

订阅专栏

使用element 在线预览pdf

npm pdf

npm install --save vue-pdf

导入 pdf

import pdf from 'vue-pdf';

components中添加 pdf

components: {
        pdf
    },

简单使用

<pdf
                                :src="url"
                                :page="pdfPage"
                                @num-pages="pageCount = $event"
                                @page-loaded="pdfPage = $event"
                                style="display: inline-block; width: 100%"
                            ></pdf>

添加样式 viewVisible为true时显示

<el-dialog
                        :title="pdfTiTle"
                        :visible.sync="viewVisible" width="80%" center
                        :append-to-body="true"
                        @close='closeDialog'
                    >
                        <div style="margin-bottom: 15px; text-align: right">
                            <el-button type="primary" size="small" @click.stop="previousPage">
                                上一页
                            </el-button>
                            <el-button type="primary" size="small" @click.stop="nextPage">
                                下一页
                            </el-button>
                            <span>当前第{{pdfPage}}页 / 共{{pageCount}}页</span>
                        </div>
                        <div>
                            <pdf
                                :src="url"
                                :page="pdfPage"
                                @num-pages="pageCount = $event"
                                @page-loaded="pdfPage = $event"
                                style="display: inline-block; width: 100%"
                            ></pdf>
                        </div>
                    </el-dialog>

//关闭窗口初始化PDF页码
        closeDialog(){
            this.pdfPage = 1;
            this.viewVisible = false;
        },
        //PDF改变页数
        previousPage(){
            var p = this.pdfPage
            p = p>1?p-1:this.pageCount
            this.pdfPage = p
        },
        nextPage(){
            var p = this.pdfPage
            p = p<this.pageCount?p+1:1
            this.pdfPage = p
        }

传入文件名获取后缀（return pdf），用来判断存在

//传入文件名 获取后缀
        extname(filename){
            if(!filename||typeof filename!='string'){
                return false
            };
            let a = filename.split('').reverse().join('');
            let b = a.substring(0,a.search(/\./)).split('').reverse().join('');
            return b
        },