pdf预览

src/views/file/pdf-view.vue

 <template>
   <div class="pdf-view">
-    <p class="title">PDF预览</p>
-    <p class="arrow">
-      <!--      上一页-->
-      <el-button size="small" type="primary" @click="changePdfPage(0)">
-        下一页
-      </el-button>
-      {{ currentPage }} / {{ pageCount }}
-      <!--      下一页-->
-      <el-button size="small" type="primary" @click="changePdfPage(1)">
-        下一页
-      </el-button>
-    </p>
-    <pdf
-      ref="pdf"
-      :src="src"
-      :page="currentPage"
-      @progress="loadedProcess"
-      @num-pages="pageCount = $event"
-      @page-loaded="currentPage= $event"
-      @loaded="loadPdfHandler"
-    />
-    <div v-if="percentage < 100" class="process">
-      <el-progress type="circle" :percentage="percentage" />
+    <aside>
+      基于插件 <a href="https://github.com/FranckFreiburger/vue-pdf" target="_blank">vue-pdf</a>
+    </aside>
+    <div class="demo-block demo">
+      <div class="source">
+        <p>例子：<el-button  type="primary" @click="dialogVisible = true">PDF预览</el-button>
+        </p>
+      </div>
+      <div class="meta">
+        <div class="description">
+          <p><code>1）html</code>代码</p>
+        </div>
+        <div class="highlight">
+          <pre v-highlight><code class="hljs">
+      {{html1}}
+          </code></pre>
+        </div>
+        <div class="description">
+          <p>2）<code>js</code>代码</p>
+        </div>
+        <div class="highlight">
+          <pre v-highlight><code class="hljs">
+import pdf from 'vue-pdf'
+components: { pdf },
+
+//变量
+src: '',
+currentPage: 1,
+pageCount: 0,
+percentage: 0,
+
+changePdfPage(val) {
+ if (val === 0 && this.currentPage > 1) {
+   this.currentPage--
+ }
+ if (val === 1 && this.currentPage < this.pageCount) {
+   this.currentPage++
+ }
+},
+
+// pdf加载时
+loadPdfHandler(e) {
+ this.currentPage = 1 // 加载的时候先加载第一页
+},
+
+// 加载中进度条
+loadedProcess(e) {
+  this.percentage = Number((100 * e).toFixed(1))
+}
+          </code></pre>
+        </div>
+      </div>
+
     </div>
+
+<!--    pdf预览弹窗   -->
+    <el-dialog :visible.sync = dialogVisible>
+      <p class="arrow">
+        <!--      上一页-->
+        <el-button size="small" type="primary" @click="changePdfPage(0)">
+          下一页
+        </el-button>
+        {{ currentPage }} / {{ pageCount }}
+        <!--      下一页-->
+        <el-button size="small" type="primary" @click="changePdfPage(1)">
+          下一页
+        </el-button>
+      </p>
+      <pdf
+        ref="pdf"
+        :src="src"
+        :page="currentPage"
+        @progress="loadedProcess"
+        @num-pages="pageCount = $event"
+        @page-loaded="currentPage= $event"
+        @loaded="loadPdfHandler"
+      />
+      <div v-if="percentage < 100" class="process">
+        <el-progress type="circle" :percentage="percentage" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -38,23 +95,46 @@ export default {
       src: 'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
       currentPage: 1,
       pageCount: 0,
-      percentage: 0
+      percentage: 0,
+      dialogVisible: false,
+      html1:`
+<p class="arrow">
+  <!--上一页-->
+ <el-button size="small" type="primary" @click="changePdfPage(0)">
+    下一页
+ </el-button>
+  {{ currentPage }} / {{ pageCount }}
+  <!--      下一页-->
+  <el-button size="small" type="primary" @click="changePdfPage(1)">
+   下一页
+  </el-button>
+</p>
+<!--pdf预览-->
+<pdf
+  ref="pdf"
+  :src="src"
+  :page="currentPage"
+  @progress="loadedProcess"
+  @num-pages="pageCount = $event"
+  @page-loaded="currentPage= $event"
+  @loaded="loadPdfHandler"
+/>
+<!--进度条-->
+<div v-if="percentage < 100" class="process">
+   <el-progress type="circle" :percentage="percentage" />
+</div>`
     }
   },
   created() {
     // this.src = pdf.createLoadingTask(this.src)
   },
   methods: {
-    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
     changePdfPage(val) {
-      // console.log(val)
       if (val === 0 && this.currentPage > 1) {
         this.currentPage--
-        // console.log(this.currentPage)
       }
       if (val === 1 && this.currentPage < this.pageCount) {
         this.currentPage++
-        // console.log(this.currentPage)
       }
     },
 
@@ -65,14 +145,17 @@ export default {
 
     // 加载中进度条
     loadedProcess(e) {
-      console.log(e)
       this.percentage = Number((100 * e).toFixed(1))
     }
   }
 }
+
 </script>
 
 <style lang="scss" scoped>
+  .pdf-view{
+    margin: 40px;
+  }
   .title {
     text-align: center;
     font-weight: bold;
@@ -85,7 +168,4 @@ export default {
     margin: 60px;
   }
 
-  pdf > span {
-    width: 100%;
-  }
 </style>