使用element 在线预览pdf

使用element 在线预览pdf

  1. npm pdf
npm install --save vue-pdf
  1. 导入 pdf
import pdf from 'vue-pdf';
  1. components中添加 pdf
components: {
        pdf
    },
  1. 简单使用
<pdf
                                :src="url"
                                :page="pdfPage"
                                @num-pages="pageCount = $event"
                                @page-loaded="pdfPage = $event"
                                style="display: inline-block; width: 100%"
                            ></pdf>
  1. 添加样式 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
        },
上一篇:SpringBoot使用JPA自定义Query多表动态查询


下一篇:vue+bootstrap前端进行分页