vue 预览 pdf

vue 预览 pdf

1.引入插件

import pdf from 'vue-pdf'

2.导入、和引入组件

import pdf from 'vue-pdf'

 components: {
    pdf
  }

3.核心代码

  
    

    
      
         上一页
        下一页
      
      {{ pageNum }} / {{ pageTotalNum }}
      
    

  



import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf
  },
  data() {
    return {
      isFixedHeight: true,
      url: 'https://xx.pdf',
      pageNum: 1,
      pageTotalNum: 1, //总页数
       loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },

  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },

    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page