md

src/components/PdfViewer/innerPdf.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <pdf
+      v-for="i in numPages"
+      :key="i"
+      :src="src"
+      :page="i"
+      ></pdf>
+  </div>
+  </template>
+  <script>
+  import pdf from 'xd-vue-pdf'
+  export default {
+    components: {
+      pdf
+    },
+    props: {
+      pdfSrc: {
+        type: String,
+        require: true
+      }
+    },
+
+  data() {
+    return {
+      src: '',
+      numPages: undefined,
+    }
+  },
+  mounted() {
+    this.loadPDF(this.pdfSrc)
+  },
+  methods:{
+    loadPDF(url){
+      this.src=pdf.createLoadingTask(url)
+      this.src.promise.then(pdf => {
+        this.numPages = pdf.numPages;//获取pdf页数
+      });
+    },
+    //很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白
+    resetPageNum(){
+      this.numPages=undefined
+    }
+  }
+}
+</script>