在vue中使用vue-layer+vue-pdf弹出框查看PDF,支持滚轮滚动 ctrl按住可缩放查看,输入页码跳转

于 2020-08-04 14:14:53 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42772570/article/details/107783388
版权

在vue中使用vue-layer+vue-pdf弹出框查看PDF,支持滚轮滚动 ctrl按住可缩放查看,输入页码跳转

先看效果图:
默认打开的弹出框 可自定义大小
在这里插入图片描述

可缩放弹框 全屏
在这里插入图片描述

缩放到左下角
在这里插入图片描述

下面教你使用
首先需要导入对应的插件
vue-layer 点击进入作者去查看相关属性及方法 本文只做弹出框+PDF展示 可以自定义

Attribut 官网可设置的属性
{
  type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
  title: '信息',
  content: '',
  area: 'auto',
  offset: 'auto',
  icon: -1,
  btn: '确定',
  time: 0,
  shade: true,//是否显示遮罩
  yes: '',
  cancel: '',
  tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
  tipsMore: false,//是否允许多个tips
  shadeClose: true,//点击遮罩是否关闭
  maxmin: true,//开启最大化最小化
  scrollbar: true, //是否允许浏览器出现滚动条:默认是允许
  resize: false //是否允许拉伸，默认是不允许
}

vue-layer  //npm install vue-layer
vue-pdf  //npm install vue-pdf

导入后需要在项目的main.js中引入插件

import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue);

查看PDF的页面

 import pdfView from './pdfView'
 this.$layer.iframe({
            content: {
              content: pdfView, //传递的组件对象
              parent: this,//当前的vue对象
              data:{
                pdfUrl:this.src
              }//props
            },
            shade: 0,//不显示遮罩层
            maxmin: true,//显示最大化最小化按钮
            area:[width,height],
            title: '查看PDF',
             })

复制进入你的项目可以直接使用的
pdfView页面全部代码：

<template>
  <div class="rotate_contanier">
    <iframe :src="pdfUrl" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
  import Viewer from 'v-viewer'
  export default {
    props: {
      dataitemd: Array,
      deltype: Boolean,
      currentIndex: {
        type: Number,
        default: 0
      },
      pdfUrl:String
    },
    name: 'pdfView',
    data () {
      return {
        pictureList: [],
        fileInfo: [],
        currentPage: 0,
        imgShow: false,
        pdfShow: false,
        rotateData: false,
        noNull: false,
        newData: [],
        delDataed: '',
        showDisplay: false,
        disabledBtn: false,
        tabOne:false
        // clientHeight:'
      }
    },
    // watch: {
    //       // 如果 `clientHeight` 发生改变，这个函数就会运行
    //       clientHeight: function() {
    //           this.changeFixed(this.clientHeight);
    //       }
    //   },
    created () {
      // 设置图片初始旋转角度

      this.delDataed = this.deltype
      this.currentPage = this.currentIndex
      console.log(this.deltype)
      this.indexData()
    },
    mounted () {
      //  this.clientHeight = `${document.documentElement.clientHeight}`;
    },
    methods: {
      seeImg (type) {
        console.log('开始', this.currentPage)
        if (type === 1) {
          // 上一张
          if (this.currentPage <= 0) {
            this.currentPage = this.pictureList.length - 1
          } else {
            this.currentPage--
          }

          // if (this.currentPage >= this.pictureList.length) {
          //   this.currentPage = 0
          // }
          console.log('上一张', this.currentPage)
        } else if (type === 2) {
          // 下一张
          if (this.currentPage >= this.pictureList.length - 1) {
            this.currentPage = 0
          } else {
            this.currentPage++
          }

          // if (this.currentPage < 0) {
          //   this.currentPage = this.pictureList.length - 1
          // }
          console.log('下一张', this.currentPage)
        }
        console.log('....', this.currentPage)
        // 获取图片当前信息
        console.log(' this.fileInfo ', this.fileInfo)
        this.fileInfo = this.pictureList[this.currentPage]
        if (this.fileInfo.suffix === 'pdf' || this.fileInfo.fileSuffix === 'pdf') {
          this.imgShow = false
          this.pdfShow = true
          this.rotateData = false
          this.delDataed = this.deltype
        } else {
          this.imgShow = true
          this.pdfShow = false
          this.rotateData = true
          this.delDataed = this.deltype
          // this.$refs.bigImage.style.transform = `rotate(${this.fileInfo.deg}deg)`
        }
      },
      // 旋转图片
      // rotate() {
      //   this.fileInfo = this.pictureList[this.currentPage]
      //   this.fileInfo.deg += 90
      //   if (this.fileInfo.deg >= 360) {
      //     this.fileInfo.deg = 0
      //   }
      //   this.$refs.rotate.style.transform = `rotate(${this.fileInfo.deg}deg)`
      // },
      // 左旋转
      leftBtn () {
        console.log(this.dataitemd)
        this.fileInfo = ''
        this.fileInfo = this.pictureList[this.currentPage]
        this.fileInfo.deg -= 90
        if (this.fileInfo.deg <= -360) {
          this.fileInfo.deg = 0
        }
        this.$refs.bigImage.style.transform = `rotate(${this.fileInfo.deg}deg)`
      },
      // 垂直封装
      verticalBtn () {
        this.fileInfo = ''
        this.fileInfo = this.pictureList[this.currentPage]
        if (this.fileInfo.deg == -90 || this.fileInfo.deg == -270) {
          this.fileInfo.deg += 90
        } else if (this.fileInfo.deg == 90 || this.fileInfo.deg == 270) {
          this.fileInfo.deg -= 90
        } else {
          this.fileInfo.deg += 180
        }
        if (this.fileInfo.deg >= 360) {
          this.fileInfo.deg = 0
        }
        this.$refs.bigImage.style.transform = `rotate(${this.fileInfo.deg}deg)`
      },
      // 右封装
      rightBtn () {
        this.fileInfo = ''
        this.fileInfo = this.pictureList[this.currentPage]
        this.fileInfo.deg += 90
        if (this.fileInfo.deg >= 360) {
          this.fileInfo.deg = 0
        }
        this.$refs.bigImage.style.transform = `rotate(${this.fileInfo.deg}deg)`
      },
      // 获取高度
      // changeFixed(clientHeight) {
      //     //动态修改样式
      //     console.log(clientHeight);
      //     this.$refs.homePage.style.height = clientHeight + "px";
      //     this.$refs.homePage.style.width = clientHeight + "px";
      // }
      rollImg () {
        /* 获取当前页面的缩放比
              若未设置zoom缩放比，则为默认100%，即1，原图大小
          */
        var zoom = parseInt(this.$refs.bigImage.style.zoom) || 100
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
              wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
          */
        zoom += event.wheelDelta / 12
        /* 最小范围 和 最大范围 的图片缩放尺度 */
        if (zoom >= 50 && zoom <= 200) {
          // this.$refs.bigImage.style.zoom = zoom + '%'
        }
        var change = event.wheelDelta / 12
        var image = new Image()
        image.src = this.$refs.bigImage.src
        image.onload = () => {
          var currentWidth = parseInt(this.$refs.bigImage.style.width) || image.width
          if (currentWidth > 2 * image.width && change > 0) {
          } else if (currentWidth < 0.5 * image.width && change < 0) {
          } else {
            // this.$refs.bigImage.style.zoom = zoom + '%'

            // var currentHeight=parseInt(this.$refs.bigImage.style.height)||image.height
            this.$refs.bigImage.style.width = currentWidth + change + 'px'
          }
        }

        return false
      },
      move (e2) {
        console.log(this.fileInfo)
        const odiv = e2.target // 获取目标元素
        // 阻止默认事件的方法,如果不阻止默认事件onmouseup会无法触发
        e2.preventDefault()
        e2.stopPropagation()
        const that = this
        // 算出鼠标相对元素的位置
        var currentX = e2.clientX
        var currentY = e2.clientY
        var currentOffsetLeft = odiv.offsetLeft
        var currentOffsetTop = odiv.offsetTop


        odiv.onmousemove = e => {
          console.log('移动')
          const disX = currentX - currentOffsetLeft
          const disY = currentY - currentOffsetTop
          odiv.style.marginLeft = e.clientX - disX + 'px'
          odiv.style.marginTop = e.clientY - disY + 'px'
          // }
        }
        document.onmouseup = e => {
          // console.log('停止')
          odiv.onmousemove = null
          // odiv.onmouseup = null
        }
      },
      delData () {
        if (this.pictureList.length > 0) {
          const that = this

          this.$confirm({
            title: '温馨提示',
            content: '是否删除？',
            okText: '确定',
            okType: 'primary',
            cancelText: '取消',
            onOk () {
              that.newData.push(that.pictureList[that.currentPage])
              that.pictureList.splice(that.currentPage, 1)
              if (that.currentPage < that.pictureList.length - 1) {
                that.currentPage++
              } else {
                that.currentPage = that.pictureList.length - 1
              }
              that.indexData(that.pictureList)
              that.$emit('remainData', that.pictureList, that.newData)
            },
            onCancel () {}
          })
          console.log(this.newData)
        } else {
          this.$message.warning('暂无查看内容，无法删除！')
        }
      },

      // 封装页面
      indexData (item) {
        this.pictureList = item === undefined ? this.dataitemd : item

        this.pictureList.forEach(item => {
          item.deg = 0
        })
        if (this.pictureList.length > 0) {
          this.fileInfo = this.pictureList[this.currentPage]
          this.showDisplay = true
          if (this.fileInfo.suffix === 'pdf' || this.fileInfo.fileSuffix === 'pdf') {
            this.imgShow = false
            this.pdfShow = true
            this.rotateData = false
            this.noNull = false
            this.delDataed = this.deltype
          } else {
            this.imgShow = true
            this.pdfShow = false
            this.rotateData = true
            this.noNull = false
            this.delDataed = this.deltype
          }
        } else {
          this.imgShow = false
          this.pdfShow = false
          this.noNull = true
          this.delDataed = false
          this.showDisplay = false
          this.disabledBtn = true
        }
      },
      // 当前图片查看
      seeImgs() {
        const viewer = this.$el.querySelector('.img_box').$viewer
        viewer.show()
      }
    }
  }
</script>

<style >
  .rotate_contanier {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
    width: 100%;
    height: 100%;
  }
  .headers {
    height: 50px;
    margin-bottom: 10px;
    text-align: center;
    background-color: #fff;
    padding-top: 15px;
    z-index: 1;
  }
  .headers button {
    margin:0 5px;
  }
  .headers .headerItem {
    float: left;
    background: #fff;
    color: #3c3c3c;
    margin-right: -10%;
  }
  .picture_contaner {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
  }
  .picture_contaner .img_box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .picture_contaner .img_box img {
    /* width: 100%;
    height: 100%; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .noData {
    width: 100%;
    text-align: center;
    font-size: 24px;
    margin-top: 5%;
  }
  .borderButtom {
    margin-left:0 !important;
    margin-top: 0 !important;
  }
</style>

主页面

示例代码

<template>
    <div>
      <!--pdf预览-->
      <div style="width: 50%;color: red;display: inline-block;padding-top: 50px">
       <div v-for="pdf in pdfList"  style="width: 50%;border-right-width: 2px;border-right-color: red">
         <p style="margin-left: 20px;font-size: 18px" @click="show">
           {{pdf.url}}
         </p>
       </div>
      </div>
      <!--分割线-->
      <div class="verticalBar" ></div>

      <div style="width: auto;color: gold;display: inline-block;padding-top: 50px">
        <div v-for="type in typeList"  style="width: 50%;">
          <p style="margin-left:20px;font-size: 18px" @click="showOperation">
            {{type.url}}
          </p>
        </div>
      </div>
    </div>
</template>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
  import $ from 'jquery'
  import {Vue} from "vue";
  // import showpdf from 'vue-pdf' //npm install --save vue-pdf
  import pdfView from './pdfView'
  // data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层
  // options参数直接写到json里即可，比如title
    export default {
        name: "blogInfoPage",
        data(){
          return {
            widheight:0,
            widwidth:0,
            //左边pdf列表
            pdfList:[
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              }
            ],
            //右边设备类型列表
            typeList:[
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              },
              {
                'name':'123',
                'url':'shakf.pdf'
              }
            ],
            src: 'http://image.cache.timepack.cn/nodejs.pdf', // pdf文件地址
          }
        },
      mounted(){
        this.widheight= `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
        this.widwidth= `${document.documentElement.clientWidth}`;//获取浏览器可视区域高度
      },
      methods:{
        //左侧显示pdf
        show(){
          var height=(this.widheight)+'px'//设置高度全部填充
          var width=this.widwidth/2+'px';//宽度为屏幕的一半
          this.$layer.iframe({
            content: {
              content: pdfView, //传递的组件对象
              parent: this,//当前的vue对象
              data:{
                pdfUrl:this.src
              }//props
            },
            shade: 0,//不显示遮罩层
            maxmin: true,//显示最大化最小化按钮
            area:[width,height],
            title: '查看PDF',
             })
        },
        //右侧操作
        showOperation(){
          var height=(this.widheight)+'px'//设置高度全部填充
          var width=this.widwidth/2+'px';//宽度为屏幕的一半
          this.$layer.iframe({
            content: {
              content: pdfView, //传递的组件对象
              parent: this,//当前的vue对象
              data:{
                pdfUrl:this.src
              }//props
            },
            tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
            tipsMore:true,
            shade: 0,//不显示遮罩层
            maxmin: true,//显示最大化最小化按钮
            area:[width,height],
            title: '查看PDF',
          })
        },
      },
       components:{ pdfView,}
    }
</script>

<style scoped>
  .verticalBar {
    width: 2px;
    height: 800px;
    background: cadetblue;
    display: inline-block;
    vertical-align: top;
  }
</style>

谢谢观看 0v0

丶流言
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值