1、下载插件  npm install --save vue-pdf

2、在需要展示的页面引入vue-pdf

image.png

img

     <div class="pdf">

              <p class="arrow">

                <span @click="changePdfPage(0)" class="turn" :class="{grey:currentPage===1}">Preview</span>

                {{currentPage}} / {{pageCount}}

                <span @click="changePdfPage(1)" class="turn" :class="{grey:currentPage===pageCount}">Next</span>

                </p>

              <div class="main">

                <pdf :src="src" ref="ref" class="pdf" :page="currentPage" @num-pages="pageCount=$event"

                    @page-loaded="currentPage=$event"

                    @loaded="loadPdfHandler"></pdf>

              </div>

          </div>

==========================================================================================

            import pdf from 'vue-pdf'

            export default {

            components: {pdf},

                data () {

                    return {

                        currentPage:0, // pdf文件页码

                        pageCount:0, // pdf文件总页数

                        fileType:'pdf', // 文件类型

                        src:'./qq.pdf', // pdf文件地址

                    }

                },

                created() {

                    this.src =pdf.createLoadingTask(this.src)

                 },

                  methods: {

                    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页

        changePdfPage (val) {

            // console.log(val)

            if (val ===0 &&this.currentPage >1) {

                this.currentPage--

                // console.log(this.currentPage)

            }

            if (val ===1 &&this.currentPage

                this.currentPage++

                // console.log(this.currentPage)

            }

},

        // pdf加载时

        loadPdfHandler (e) {

            this.currentPage =1 // 加载的时候先加载第一页

        }

}

}

  .pdf {

        margin:0 auto;

  }

.main {

    position:relative;

    margin:0 auto;

    width:50%;

    height:800px;

    overflow:scroll;

  }

3、 效果

4、遇到的问题

1)引入时报错  

2）将pdf文件放在当前目录显示不出来，移至public目录下就显示了