vue-pdf和iframe实现预览pdf文件

前言

前端项目中预览pdf文件，

---

提示：自己的笔记还在修改

一、vue-pdf

1.安装

代码如下（示例）：

npm install --save vue-pdf

2.页面结构

代码如下（示例）：

<template>
    <div>
      <pdf 
        ref="pdf"
        :src="url"
      >
      </pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"http://image.cache.timepack.cn/nodejs.pdf",
      }
  }
</script>

---

3.注意

注意：这是pdf在页面上只显示一页

4.pdf显示多页

<template>
  <div>
    <pdf
      ref="pdf"
      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"http://image.cache.timepack.cn/nodejs.pdf",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
      this.getNumPages()
  },
  methods: {
    # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  }
</script>

5.注意

注意：
把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态,所以我们可以考虑按页加载，有的卡在加载状态时间很久，有的已经出来了，但再次刷新时已经出来的也可能再次卡顿，不太清楚具体是怎么回事

6.实现分页预览

<template>
  <div class="pdf">
    <div class="arrow">
      <button @click="Sub">--</button>
         {{currentPage}}/{{pageCount}}
      <button @click="Add">++</button>
    </div>
   
    <pdf
      :src="src" 
      :page="currentPage" 
      @num-pages="pageCount=$event" 
      @page-loaded="currentPage=$event" 
      @loaded="lr"> 
    </pdf>

  </div>
</template>

<script>
import pdf from 'vue-pdf'
  export default {
    components: {
         pdf
    },
    data () {
      return {
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数　　　
        src: '/static/pdf/guang.pdf', // pdf文件地址
      }
    },　　

    methods: {
      Sub(){
          if(this.currentPage>1){
            this.currentPage--
          }
      },
      Add(){
          if(this.currentPage<this.pageCount){
            this.currentPage++
          }
      },

      // pdf加载时
      lr (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }

    }
  }

</script>


<style>

</style>

直接使用了iframe标签

二、iframe

1.页面结构

<iframe id="ddd" :src="wsyitem2.src" width="100%%" height="100%" ></iframe>

2.页面展示

可见一个ifranme可预览，下载，打印，看目录，放大等功能，但当第二次点击对应的iframe标签时，却不显示pdf文件了

2.原因