vuepdf 简单封装使用

参考文章

可以先去看看这篇博客，了解基本的使用方法。

vue-pdf实现pdf文件在线预览

封装组件 PdfPreview.vue

<template>
  <div class="pdf-wrapper" ref="wrapper">
    <pdf ref="pdf" :src="pdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: '',
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  components: {
    pdf
  },
  data() {
    return {
      numPages: null
    }
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfUrl)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pdf-wrapper {
  overflow-y: scroll;
}
</style>

搭配 El 组件使用

我项目中使用了 el-drawer 组件来进行包裹，具体根据实际需要来。

    <el-drawer
      title="预览"
      :visible.sync="drawer"
      size="50%"
      :before-close="drawerClose"
      :destroy-on-close="true"
      :with-header="false"
    >
      <pdf-preview :pdfUrl="pdfUrl"></pdf-preview>
    </el-drawer>

页面展示效果