使用pdf实现在线预览

ゝ一世哀愁。 2022-12-01 03:41 310阅读 0赞

1.安装引入

npm i vue-pdf

import pdf from "vue-pdf";
    
     components: {
        pdf,
      },

2.html部分：

<div class="mod">
                    <div
                    class="left"
                    :class="{select:idx==2}"
                    @touchstart="idx=2"
                    @touchend="idx=-1"
                    @click="changePdfPage(0)"
                  ><img
                      src="../../assets/course/left.png"
                      alt=""
                    >
                  </div>
                  <span>{
       {currentPage}} /{
       {pageCount}}</span>
                  <div
                    class="right"
                    :class="{select:idx==3}"
                    @touchstart="idx=3"
                    @touchend="idx=-1"
                    @click="changePdfPage(1)"
                  ><img
                      src="../../assets/course/right.png"
                      alt=""
                    ></div>
    </div>

data() {
        return {
          currentPage: 1,
          pageCount: 0,
          scale: 100, // 放大系数
          idx: -1,
          clauseTitle: "",
          loadedRatio: 0,
          fullscreen: false,
        };
      },
      methods: {
        changePdfPage(val) {
          if (val === 0 && this.currentPage > 1) {
            this.currentPage--;
          }
          if (val === 1 && this.currentPage < this.pageCount) {
            this.currentPage++;
          }
        },
        // pdf加载时
        loadPdfHandler() {
          this.currentPage = 1; // 加载的时候先加载第一页
        }
       }

4.放大缩小功能实现

// 放大
        scaleD() {
          this.scale += 5;
          // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
          this.$refs.all.style.width = parseInt(this.scale) + "%";
        },
        // 缩小
        scaleX() {
          if (this.scale <= 20) {
            return;
          }
          this.scale += -5;
          this.$refs.all.style.width = parseInt(this.scale) + "%";
          // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
        },

5.全屏模式

安装:

npm install --save screenfull

引用：

import screenfull from "screenfull";

// 全屏模式 将方法绑定(点击事件)到页面的元素上即可
        screenfull() {
          if (!screenfull.isEnabled) {
            // console.log('您的浏览器无法进入全屏模式')
            return false;
          }
          screenfull.toggle(this.$refs.all);
          this.fullscreen = true;
        },
        // Esc 全屏监测
        checkFull() {
          let isFull =
            document.fullscreenEnabled ||
            window.fullScreen ||
            document.webkitIsFullScreen ||
            document.msFullscreenEnabled;
          if (isFull === undefined) {
            isFull = false;
          }
          return isFull;
        },

mounted() {
        window.onresize = () => {
          // 全屏下监控是否按键了ESC
          if (!this.checkFull()) {
            // 退出全屏
            this.fullscreen = false;
          }
        };
      },