<template>
  <div class="preview-pdf">
    <div class="loading-block">
      <img src="../images/loading-bar.gif" class="loading">
      <p class="loading-word">加载中...</p>
    </div>
    <div ref="pdfViewerRef" style="z-index: 10;"></div>
  </div>
</template>

<script>
import PDFObject from 'pdfobject';

export default {
  name: "pdf-preview",
  data() {
    return {
      url: '',
      previewUrl:""
    }
  },
  mounted() {
    this.getPDFUrl();
  },
  methods: {
    getPDFUrl() {
      const fjid = this.$route.query.fjid;
      const url = window.JAVA_URL  + `/formUploadController/previewFile?id=${fjid}`;
      fetch(url).then(response => response.arrayBuffer())
        .then(buffer => new Uint8Array(buffer))
        .then(uint8array => {
          // 创建Blob对象
          const blob = new Blob([uint8array], { type: 'application/pdf' });

          // 创建一个指向Blob的URL
          const pdfUrl = URL.createObjectURL(blob);

          // 现在你可以使用这个URL与PDFObject结合
          PDFObject.embed(pdfUrl,this.$refs.pdfViewerRef, {style: 'position: absolute'}); // 'pdf-container'是页面上用于展示PDF的HTML元素ID
        });
    }
  }
}
</script>

<style scoped lang="scss">
.preview-pdf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: hidden;

  .loading-block {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;

    .loading {
      width: 150px;
      height: 100px;
      z-index: 1;
    }

    .loading-word {
      width: 150px;
      text-align: center;
      font-size: 14px;
      font-family: "saspiconfont", sans-serif;
      color: #333333;
      letter-spacing: 4px;
    }
  }

  /deep/ {
    .pdfobject-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}
</style>
