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++

      }

    }

}

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容