pbl-teacher-table/src/components/pages/pblCourse/component/vpdf.vue

<template>
  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
  <div class="pdf">
    <div class="loading" v-show="isloading">
      <span>pdf可能会加载时间有点长，请耐心等待...</span>
    </div>
    <!-- <div id="contentArea" class="show" v-if="!loading">
      <pdf :scale.sync="scale" :resize="true" ref="wrapper" class="p-pdf" :src="pdfData" v-for="i in numPages" :key="i"
        :id="i" :page="i" style="width: 100%">
      </pdf>
    </div> -->
    <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
      :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + pdfUrl"></iframe>
    <!-- <div class="rightArea">
      <div class="toolGroup">
        <div class="page">第 {{ page }} / {{ numPages }} 页</div>
        <el-button type="primary" @click.stop="prePage">上一页</el-button>
        <el-button type="primary" @click.stop="nextPage">下一页</el-button>
      </div>
    </div> -->
  </div>
</template>

<script>
// import pdfvuer from "pdfvuer"; // pdfvuer 版本为@1.6.1
// import "pdfjs-dist/build/pdf.worker.entry";
// const PDF = require("pdfjs-dist");
// PDF.GlobalWorkerOptions.workerSrc = "../../common/pdf.worker.js";

export default {
  name: "Pdfvuer",
  components: {
    // pdf: pdfvuer,
  },
  props: {
    // 当前pdf路径
    pdfUrl: {
      type: String,
      default:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
    },
    ppage: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      page: 1, // 当前页
      numPages: 0, // 总页数
      pdfData: undefined,
      inputPage: 1, // 输入的页码
      isloading: false,
      scale: "page-width",
    };
  },
  mounted() {
    // this.isloading = this.$loading.service({
    //   background: "rgba(255, 255, 255, 0.7)",
    //   target: document.querySelector(".loading"),
    //   text: "加载中...",
    //   spinner: "",
    // });
    this.isloading = false;
    this.$refs.viframe.onload = function () {
      this.isloading = false
    }
    console.log(this.isloading);
    // this.getPdf();
  },
  beforeDestroy() { },
  watch: {
    pdfUrl: function (s) {
      // this.isloading = this.$loading.service({
      //   background: "rgba(255, 255, 255, 0.7)",
      //   target: document.querySelector(".loading"),
      //   text: "加载中...",
      //   spinner: "",
      // });
      this.isloading = false;
      this.$refs.viframe.onload = function () {
        this.isloading = false
      }
      // this.getPdf();
    },
  },
  methods: {
    // 获取 pdf 信息
    getPdf() {
      this.pdfData = pdfvuer.createLoadingTask({
        url: this.pdfUrl,
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
        cMapPacked: true,
      });
      this.pdfData
        .then((pdf) => {
          // this.isloading.close();
          this.isloading = false
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 上一页
    prePage() {
      let page = this.page;
      page = page > 1 ? page - 1 : 1;
      this.page = page;
    },
    // 下一页
    nextPage() {
      let page = this.page;
      page = page < this.numPages ? page + 1 : this.numPages;
      this.page = page;
    },
  },
};
</script>
<style scoped>
.loading {
  height: 100%;
  width: 100%;
  /* background: #000; */
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rgba(255, 255, 255, 0.7); */
  background-color: rgba(255, 255, 255, 1);
  z-index: 9;
  font-size: 20px;
  color: #007fff;
}

.pdf {
  height: 100%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.pdf .show {
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.pdf .show .p-pdf {
  overflow: hidden;
}

.pdf .show .p-pdf .line {
  position: absolute;
  width: 50px;
  right: -50px;
  background: rgb(255, 186, 96);
  height: 2px;
}

.pdf .show .p-pdf span {
  width: 100%;
  text-align: center;
  color: #fff;
}

.pdf .show .p-pdf span+span {
  margin-top: 10px;
}

.pdfbox {
  /* border: 3px solid #000; */
  /* box-sizing: border-box; */
  /* border-radius: 4px; */
  /* overflow: hidden; */
}

.pdf .pdf_footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  width: 100%;
  height: 75px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pdf .pdf_footer .info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.pdf .p-pdf .viewerContainer {
  width: 100%;
}

/* .pdf .pdf_footer .info div {
  width: 30%;
} */
.pdf .pdf_footer .operate {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.pdf .pdf_footer .operate div {
  text-align: center;
  font-size: 15px;
}

.pdf .pdf_footer .operate .btn {
  cursor: pointer;
  margin: 5px 10px;
  width: 100px;
  border-radius: 10px;
  padding: 5px;
  color: #fff;
  background-color: #066ebe;
}

.pdf::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.pdf::-webkit-scrollbar {
  border-radius: 10px;
  background-color: #b8bdc9;
}

/*定义滑块 内阴影+圆角*/
.pdf::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
  background-color: #2c5ab3;
}
</style>