博客

1 下载依赖

npm install –save vue-pdf

2`

 import pdf from 'vue-pdf'
export default {
 components: {
   pdf,
   }},
    metaInfo: {
    meta: [
      { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
    ]
  },
  
  data() {
    return {
      src:'',
      numPages: undefined,
    list:[]
    };
  },

   <van-tabs @click="onClick" >
    <van-tab v-for="item in list" :title="item.fileName" :key="item.fileId" :name="item.fileUrl" >
      <div class="pdf-box">
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="src"
          :page="i">
        </pdf>
      </div>
    </van-tab>

 methods: {
  onClick (name) {
  this.src = pdf.createLoadingTask(name)
   this.src.promise.then(pdf => {
      console.log(pdf,"pdf");
    this.numPages = pdf.numPages // 这里拿到当前pdf总页数
   })
  },
   geturl(){接口获取后台参数}
  }