项目中点击预览PDF文件

参考：https://blog.csdn.net/prey1025/article/details/90029284
最近做项目，需要在项目中预览PDF文件，就百度了一下，找到了一个比较简单的方法

1、在官网上下载pdfjs文件
链接地址： http://mozilla.github.io/pdf.js/getting_started/#download
2、将下载的文件放在项目的static文件夹中

3、在需要浏览PDF的组件中写入
pdfUrl在data中定义的，是pdf文件路径

完成之后就可以预览pdf文件
（这个是引入项目同目录的PDF文件）

最近在做项目时，遇到甲方提的一个需求，就是实现点击图片实现在线预览PDF文档的功能。于是我就在网上找了很多关于PDF文档预览功能，现在将它们整理了一下。代码参考下图：

引用了npm install --save vue-pdf

template代码如下:

<template>
    <div class="box_con BlockBg1">
      <div class="imgfm fml" @click="clickImg(1)"><img src="../../../assets/img/封面1.jpg"/></div>
      <div class="imgfm fmr" @click="clickImg(2)"><img src="../../../assets/img/封面2.jpg"/></div>
      <el-dialog :title="title" :visible.sync="dialogVisible" :fullscreen="true" center>
        <div class="box_con_scroll" @scroll="divScroll($event)">
          <pdf :src="src" v-show="false"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"></pdf>
          <div v-for="i in pageCount" :key="i+'div'" class="containerDiv" :id="'containerDiv'+i">
            <pdf :key="i" :page="i" :src="src"></pdf>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
js代码:

<script>
import pdf from 'vue-pdf'
export default {
  components: {pdf},
  data() {
    return {
      src: "",
      dialogVisible: false,
      title:'',
      currentPage: 1, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      numPages:0
    };
  },
  methods: {
    divScroll(ev){
    },
    clickImg(type){
      switch(type){
        case 1:
          this.previewPDF(this.$http.adornUrl('docfile/preview?fileId=111'));
          this.title = "中国核电2016-2018年总体经营和绩效对标报告";
          break;
        case 2:
          this.previewPDF(this.$http.adornUrl('docfile/preview?fileId=222'));
          this.title = "中国核电2019年总体经营和绩效对标报告合并版";
          break;
        default:
          break;
      }
      this.dialogVisible = true;
    },
    //预览pdf
    previewPDF(url) {
      this.src = pdf.createLoadingTask(url);
    },
  }
};
</script>