保姆级vue-pdf的使用过程

<template>
  <div class="pdf-container">
    <pdf
      :src="pdfSrc"
      v-for="pageNumber in numPages"
      :key="pageNumber"
      :page="pageNumber"
      @num-pages="numPages = $event"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      numPages: 0
    }
  }
}
</script>
 
<style>
.pdf-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

这个简单的例子展示了如何在Vue应用中使用vue-pdf来展示PDF文件。pdf组件是一个用于渲染PDF页面的自定义Vue组件，它接受一个PDF路径和页码作为props。numPages是一个响应式数据，它会在PDF文档加载完成后被设置为文档的总页数。v-for指令用于循环渲染每一页，其中:key是必须的，因为Vue需要它来跟踪每个节点的身份。