vue-pdf实现pdf文件在线预览

安装

 npm i -s vue-pdf

引入组件

import pdf from 'vue-pdf';

export default {
  components: {
    pdf
  },
  ···
}

使用组件

// 单页
<pdf :src="file"></pdf>
// 多页
<pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>

数据处理

// 单页
export default {
  ···
  data () {
    return {
        file: "/pdf/test.pdf"
    }
  }
}
// 多页
export default {
  ···
  data () {
    return {
      file: "/pdf/test.pdf",
      pageNum: 1
    }
  },
  methods: {
    getPageNum () {
      let loadingTask = pdf.createLoadingTask(this.file);
      loadingTask.promise.then(pdf => {
        this.pageNum = pdf.numPages;
      }).catch(err => {
        console.error('pdf加载失败', err);
      })
    }
  },
  mounted () {
    this.getPageNum();
  }
}