第三篇： 使用 vue-pdf 实现前端预览 PDF文件

第三篇： 使用 vue-pdf 实现前端预览 PDF文件

主要知识点：npm 安装 vue-pdf； 本地pdf文件路径地址；vue-pdf的createLoadingTask()方法

大致效果如下：

1.npm 安装 vue-pdf

npm install vue-pdf --save

2.本地pdf文件路径地址。在工程中加入自己测试需要的 pdf 文件，路径最好放在 public目录下，如下：

3.vue-pdf的createLoadingTask()方法。为了防止在开发中出现跨越而读取不到文件，采用createLoadingTask（）方法，可获得 文件页码 等信息。

<template>
  <div class="panel-content">
    <el-dialog
      title="预览"
      :visible.sync="viewVisible"
      width="50%"
      height="100%"
      center
    >
      <div class="pdf">
        <pdf
          v-for="currentPage in numPages"
          :key="currentPage"
          :src="pdfsrc"
          :page="currentPage"
          @loaded="loadPdfHandler"
        ></pdf>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: 'TEMPLATE',
  data() {
    return {
      viewVisible: true,
      pdfsrc: '/pdf/element实战.pdf',
      numPages: 1,
      currentPage: 1, // pdf文件页码
      pageCount: 1 // pdf文件总页数
    }
  },
  components: {
    pdf
  },
  mounted() {
  },
  created() {
    // createLoadingTask() 处理文件等跨越问题
    this.pdfsrc = pdf.createLoadingTask({ url: this.pdfsrc })
    this.loadPdfHandler()
  },
  methods: {
    loadPdfHandler() {
      this.pdfsrc.promise.then(pdf => {
      // 获取pdf文件相关信息，页码等
        this.numPages = pdf.numPages
      })
      this.currentPage = 1 // 加载的时候先加载第一页
      // 强制刷新
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped></style>

4.这就是简短的 pdf 预览的 Demo，谢谢大家的支持。