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

最新推荐文章于 2024-04-03 14:55:24 发布

努力挣钱的小鑫

最新推荐文章于 2024-04-03 14:55:24 发布

阅读量119

点赞数

分类专栏： Vue.js 文章标签： vue.js pdf javascript ecmascript 前端

本文链接：https://blog.csdn.net/IAIPython/article/details/130571207

版权

Vue.js 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

参考文章

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

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>