【Vue】vue-pdf 的简单封装使用

最新推荐文章于 2025-07-16 11:19:19 发布

原创最新推荐文章于 2025-07-16 11:19:19 发布 · 177 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #javascript #ecmascript #前端

Vue.js 专栏收录该内容

56 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用vue-pdf库创建一个PDF预览组件。内容包括封装组件PdfPreview.vue的代码展示，以及如何在页面中结合El-drawer组件进行展示。通过这个组件，可以实现PDF文件的在线预览功能。

参考文章

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

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>