[JavaScript知识库]vue中预览pdf(vue-pdf)

效果图

安装依赖

yarn add vue-pdf

<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div class="pdf">
          <div class="pdf-tab">
            <div></div>
            <div class="buttonList">
              <a-button class="btn-def btn-pre" @click.stop="prePage">
                上一页
              </a-button>
              <div class="interspace"></div>
              <a-button class="btn-def btn-next" @click.stop="nextPage">
                下一页
              </a-button>
              <div class="interspace"></div>
              <a-button class="btn-def" @click.stop="clock">
                顺时针
              </a-button>
              <div class="interspace"></div>
              <a-button class="btn-def" @click.stop="counterClock">
                逆时针
              </a-button>
              <div class="interspace"></div>
              <a-button class="btn-def" @click.stop="pdfPrintAll">
                全部打印
              </a-button>
              <div class="interspace"></div>
              <a-button class="btn-def" @click.stop="pdfPrint">
                部分打印
              </a-button>
            </div>
            <div class="pageNum">
              <span class="showDetail">{{ pageNum }} / {{ pageTotalNum }}</span>
            </div>
          </div>
          <div class="pdfContent">
            <pdf
              ref="pdf"
              :src="file_url"
              :page="pageNum"
              :rotate="pageRotate"
              @password="password"
              @progress="loadedRatio = $event"
              @page-loaded="pageLoaded($event)"
              @num-pages="pageTotalNum=$event"
              @error="pdfError($event)"
              @link-clicked="page = $event">
            </pdf>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'Workplace',
  components: {
    pdf
  },
  data () {
    return {
      user: {},
      loading: true,
      file_url: '',
      pdfLoading: false,
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      if (this.$route.query.file_url) {
        // this.file_url = this.$route.query.file_url
        this.file_url = 'http://127.0.0.1/store/infoOpen/upload/images/report/2022-04-01/859a1c48-e284-429b-9fe3-a74617eaec64.pdf'
        this.pdfLoading = true
      }
    })
  },
  methods: {
    prePage () {
      var p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    nextPage () {
      var p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    clock () {
      this.pageRotate += 90
    },
    counterClock () {
      this.pageRotate -= 90
    },
    password (updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
      console.log('...reason...')
      console.log(reason)
      console.log('...reason...')
    },
    pageLoaded (e) {
      this.curPageNum = e
    },
    pdfError (error) {
      console.error(error)
    },
    pdfPrintAll () {
      this.$refs.pdf.print()
    },
    pdfPrint () {
      this.$refs.pdf.print(100, [1, 2])
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-card{
  background-color: #525659;
}
.pdf{
  width: 60%;
  margin-left: 20%;
}
.pdf-tab{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;
}
.showDetail{
  color: white;
}
.buttonList{
  display: flex;
  justify-content: space-between;
}
.interspace{
  width: 20px;
}
</style>

``