vue在线预览pdf

一、如果可以使用浏览器自带的pdf，可以使用a标签

<a  class="down"  :href="url + item.fileView"  target="_blank">预览</a>

二、使用vue-pdf分页加载

   1、 npm install vue-pdf

   2、template

    <pdf :src="modal.url"  :page="currentPage"

            @num-pages="pageCount = $event"

            @page-loaded="currentPage = $event">

    </pdf>

    <div>

        {{currentPage}} / {{pageCount}}

          <button @click="change1">上一页</button>

          <button @click="change2">下一页</button>

    </div>

3、script

import pdf from 'vue-pdf'

export default {

    data（）{

        currentPage: 1,

      pageCount: 1

    }，

methohs：{

change1 () {

      if (this.currentPage > 1) {

        this.currentPage--

      }

    },

    change2 () {

      if (this.currentPage < this.pageCount) {

        this.currentPage++

      }

    }

}

}