javadog-vue-pdf v4.3.2

vue-pdf

vue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components.

Install via NPM/Yarn

npm i javadog-vue-pdf

yarn add javadog-vue-pdf

Example - basic

<template>
  <div class="pdf_wrap">
    <div class="pdf_list">
      <!-- src:pdf地址，page: 当前显示页 -->
      <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" > </pdf>
    </div>
    <button type="info" native-type="submit" @click="loadPdf(pdfUrl2)">
      文件2
    </button>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      src: '',
      numPages: undefined,
      pdfUrl2: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/123demo'
    }
  },
  mounted () {
    this.loadPdf(this.pdfUrl1)
  },
  methods: {
    loadPdf (url) {
      this.src = pdf.createLoadingTask(url)
      this.src.promise.then(pdf => {
        this.numPages = pdf.numPages // 这里拿到当前pdf总页数
      })
    }
  }
}
</script>
<style scoped>
.pdf_wrap {
  background: #fff;
  height: 100vh
}
.pdf_list {
  height: 80vh;
  overflow: scroll;
}
button {
  margin-bottom: 20px;
}
</style>