參考文章

可以先去看看這篇部落格，瞭解基本的使用方法。

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>
 

頁面展示效果