使用element 在线预览pdf

使用element 在线预览pdf

1. npm pdf

npm install --save vue-pdf

2. 导入 pdf

import pdf from 'vue-pdf';

3. components中添加 pdf

components: {
        pdf
    },

4. 简单使用

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

5. 添加样式 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
        },

标签：pdfPage,return,预览,pageCount,filename,pdf,false,element
来源： https://blog.csdn.net/waylonZXH/article/details/113241358