vue开发 实现pdf预览iframe形式

/**
* @Author: 858834013@qq.com
* @Name: pdf
* @Date: 2022-04-11
* @Desc:
*/
<template>
  <div class="pdfbodys">
    <iframe :src="src" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: "pdfs",
  components: {pdf},
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      status: '',
      pdfFile: "", //pdf文件地址
      currentPage: 0, // 页码
      pageCount: 0, // 总页数
    }
  },
  computed: {
    src: function () {
      return this.item.pdfFileUrl
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.pdfbody {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
  overflow: scroll;
}

.pageButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  height: 80px;

  .pagesnum {
    margin-left: 20px;
    margin-right: 20px;
    color: #FEFEFF;
    font-size: 16px;
  }
}

.pdfbodys {
  position: relative;
  width: 100%;
  height: 100%;
}

.pdfs {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
</style>