vue-pdf插件实现pdf文件预览

vue-pdf插件预览pdf

项目需要实现一个pdf文件预览功能，要求在pc端和移动端h5均可以展示并适配设备。

方案一：使用iframe即可实现，但移动端浏览器不兼容pdf，故舍弃该方案； 方案二：使用vue-pdf插件，兼容pc端和移动端，下面介绍使用方法：

1.安装插件

npm install vue-pdf

2.代码中使用

<template>
  <div class="m-vue-pdf">
      <Pdf v-for="index in numPages" :key="index" :src="pdfUrl" :page="index" />
  </div>
</template>
<script>
import { Toast } from 'vant';
import Pdf from 'vue-pdf'; // 引入插件
export default {
  components: {
    Pdf
  },
  data () {
    return {
      numPages: null,
      // 可引入网络文件或者本地文件
      pdfUrl: '/xxx.pdf' // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
    }
  },
  created () {
    this.loadPdf()
  },
  methods: {
    // 上下滚动pdf加载
    loadPdf () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 0
      })
      // 上述仅仅是为了加一个loading状态，可随意替换为项目中已有的组件
      this.pdfUrl = Pdf.createLoadingTask(this.pdfUrl)
      this.pdfUrl.promise.then(pdf => {
        this.$nextTick(() => {
          this.numPages = pdf.numPages // pdf总页数
          Toast.clear() // 及时清空loading状态
        })
      })
    }
  }
}
</script>
<style >
.m-vue-pdf {
  overflow: hidden;
}
</style>