Vue 插件 Viewer.js + pdfjs实现图片和 pdf 预览

1.下载pdf.js　　

　　　　引入pdf.js文件

　　　　地址如下：http://mozilla.github.io/pdf.js/getting_started/

2.进行安装

npm install viewerjs

3.代码-组件

<template>
  <div style="display:none;">
    <viewer :options="options" :images="images" @inited="inited" class="viewer" ref="viewer">
      <template #default="scope">
        <img v-for="(src,index) in scope.images" :src="src" :key="index">
      </template>
    </viewer>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
export default {
  name: 'imgPreview',
  components: {
    Viewer
  },
  props: {
    imgList: {
      default: () => [],
      type: Array
    }
  },
  data () {
    return {
      pdfUrl: "",
      list: [],
      options: {
        inline: false,
        button: true,
        navbar: false,
        title: true,
        toolbar: true,
        tooltip: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
        fullscreen: false,
        keyboard: true,
        interval: 5000,
        minWidth: 200,
        minHeight: 100,
        zoomRatio: 0.1,
        minZoomRatio: 0.01,
        maxZoomRatio: 100,
        zIndex: 2015,
        zIndexInline: 0,
        url: 'src',
        build: null,
        built: null,
        show: null,
        // shown: function (e) {
        shown: function () {
          let container = document.querySelector(".viewer-container")
          let iframePdfIframe = document.querySelector(".iframePdfIframe")
          if (!iframePdfIframe) {
            let pdf = document.createElement("div")
            pdf.className = "viewer-pdf"
            pdf.style.opacity = "0"
            pdf.style.width = "0"
            pdf.style.height = "0"
            let iframe = document.createElement("iframe")
            iframe.src = ""
            iframe.className = "iframePdfIframe"
            iframe.frameborder = "0"
            iframe.style.width = "100%"
            iframe.style.height = "100%"
            pdf.appendChild(iframe)
            container.appendChild(pdf)
          }
        },
        hide: null,
        hidden: null,
        view: (e)=>{
          this.viewPdf(e)
        },
        viewed: null,
      },
      images: []
    };
  },
  watch: {
    imgList: {
      deep: true,
      immediate: true,
      handler: function () {
        this.handleData()
      },
    }
  },
  mounted () {

  },
  methods: {

    //初始化
    inited (viewer) {
      let viewers = viewer
      this.$viewer = viewers
    },
    // 处理数据有多种文件格式只要图片和pdf
    handleData () {
      this.list = []
      this.images = []
      this.imgList.map(item1 => {
        item1.fileList && item1.fileList.forEach(item2 => {
          let srcType = this.getfileType(item2.visitUrl)
          if ([".jpg", ".jpeg", ".bmp", ".png",".pdf"].includes(srcType)) {
            this.list.push(item2)
            this.images.push(item2.visitUrl)
          }
        });
      })
    },
    //显示弹框
    show (e) {
      // this.$viewer.show()//显示
      let visitUrl=e.visitUrl
      let imgIndex=this.images.findIndex(item=>item===visitUrl)

      //指定显示第几页
      this.$viewer.view(imgIndex)
    },
    //显示pdf还是图片
    viewPdf (e) {
      let event = e
      let src = event.detail.image.src
      let srcType = this.getfileType(src)
      let canvas = document.querySelector(".viewer-canvas")
      let pdf = document.querySelector(".viewer-pdf")
      let pdfiframe = document.querySelector(".viewer-pdf").querySelector("iframe")
      if ([".jpg", ".jpeg", ".bmp", ".png"].includes(srcType)) {
        canvas.style.width = '100%'
        canvas.style.height = '97%'
        canvas.style.opacity = '1'
        pdf.style.width = '0'
        pdf.style.height = '0'
        pdf.style.opacity = '0'
      } else if ([".pdf"].includes(srcType)) {
        pdf.style.width = '100%'
        pdf.style.height = '97%'
        pdf.style.opacity = '1'
        pdf.style.backgroundColor = '#000'
        let p = this.list.find(item => {
          return item.visitUrl === src
        })
        let pdfUrl = process.env.VUE_APP_BASE_API + "接口";
        pdfiframe.src = (window.location.host === "localhost" ? "" : `/${地址}`) + "/static/pdf/web/viewer.html?file=" + encodeURIComponent(pdfUrl) + "&.pdf";
        canvas.style.width = '0'
        canvas.style.height = '0'
        canvas.style.opacity = '0'
      }
    },
    getfileType (name) {
      let wjm = name.substring(
        name.lastIndexOf(".")
      );
      return wjm.toLowerCase() || "";
    },
  }
}
</script>
<style lang="scss" scoped>

/deep/.viewer-toolbar>ul>li{
  background-color: rgba(0,0,0,1);
}
</style>