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

关注

原创最新推荐文章于 2026-02-15 00:06:58 发布 191 阅读 AI 写同款· GEO 优化 ›

vue项目中使用pdf.js预览pdf文件项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！其实这和前端框架无关的，直接使用pdf.js原生搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生的是最... 阅读详情

参考文章

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

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>