<!-- PdfViewer.vue -->
<template>
  <div>
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="file"
      :page="i"
      style="display: inline-block; width: 100%;"
    ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      file: null,
      numPages: undefined
    }
  },
  created() {
    this.file = this.$route.query.file
    this.loadPdf()
  },
  methods: {
    loadPdf() {
      const loadingTask = pdf.createLoadingTask(this.file)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>

<style scoped>
/* 添加一些样式以适应你的需求 */
</style>
