vue+iview+vue-pdf实现在线预览pdf

使用vue-pdf
安装：npm install vue-pdf --save -D
代码示例

previewPdf.vue
<template>
    <Modal title="预览" v-model="modalVisible"  @on-visible-change="modalVisiblechange" :width="900">
        <div class="pdf">
            <pdf ref="pdf" 
              :src="src"  
              :page="pageNum" 
              @num-pages="pageTotalNum=$event" 
              @page-loaded="pageLoaded($event)"></pdf>
        </div>
        <div slot="footer">
            <Button  type="primary" @click.stop="prePage">上一页</Button>
            <Button  type="primary" @click.stop="nextPage">下一页</Button>
            <Button @click="modalVisible = false" type="primary">关闭</Button>
        </div>
    </Modal>
</template>
import pdf from 'vue-pdf'
export default {
    components:{pdf},
    data(){
        return{
            modalVisible：false，
            src：'',
            pageNum:1,
            pageTotalNum:1
        }
    },
    methods:{
        pageLoaded(e){
            this.curPageNum = e
        },
        prePage(){
            var p = this.pageNum
            p = p>1?p-1:this.pageTotalNum
            this.pageNum = p
        },
        nextPage(){
            var p = this.pageNum
            p = p<this.pageTotalNum?p+1:1
            this.pageNum = p
        }
    }
}
</script>