ssti-CollegeManage/src/components/vword.vue

<template>
  <!--使用 pdfvuer 实现 滑动浏览 单印章-->
  <div class="pdf">
    <div class="loading" v-show="isloading">
      <span>可能会加载时间有点长，请耐心等待...</span>
    </div>
    <iframe
      ref="viframe"
      style="width: 100%; height: 800px; border: none"
      :src="pdfUrl"
    ></iframe>
  </div>
</template>

<script>

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() {
    let _this = this;
    _this.isloading = true;
    _this.$refs.viframe.onload = function () {
      _this.isloading = false;
    };
    console.log(_this.isloading);
    // this.getPdf();
  },
  beforeDestroy() {},
  watch: {
    pdfUrl: function (s) {
      let _this = this;
      _this.isloading = true;
      _this.$refs.viframe.onload = function () {
        _this.isloading = false;
      };
      console.log(_this.isloading);
      // this.getPdf();
    },
  },
  methods: {
  },
};
</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>