vue2.0如何借用vue-pdf实现在线预览pdf文件

npm i --save vue-pdf

<template>
  <div class="read">
    <van-nav-bar
      title="预览"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="pdf" v-show="fileType === 'pdf'">
      <p class="arrow" style="text-align:center">
        <!-- // 上一页 -->
        <van-tag color="#7232dd" plain @click="changePdfPage(0)">上一页</van-tag>
        {{currentPage}} / {{pageCount}}
        <!-- // 下一页 -->
        <van-tag color="#7232dd" @click="changePdfPage(1)">下一页</van-tag>
      </p>
      <!--
      自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了
      src：需要展示的PDF地址
      currentPage：当前展示的PDF页码
      PDF文件总页码
      一开始加载的页面
      loadPdfHandler：加载事件
      -->
      <pdf
        :src="src"  
        :page="currentPage" 
        @num-pages="pageCount=$event" 
        @page-loaded="currentPage=$event" 
        @loaded="loadPdfHandler">
      </pdf>
    </div>
  </div>
</template>

// 引入组件
import pdf from 'vue-pdf'
// 引入文件
import pdfUrl from './example.pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: 'pdf', // 文件类型
      src: pdfUrl, // pdf文件地址
    }
  },
  created () {
   // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
　　　this.src = pdf.createLoadingTask(this.src)
  },
   methods: {
   // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      }
  }
}

npm install --save-dev file-loader
or
cnpm install --save-dev file-loader

module.exports = {
	// webpack配置
	chainWebpack: config => { 
	  config.module
	  .rule('pdf')
	  .test(/\.pdf$/)
	  .use('file')
	    .loader('file-loader')
	    .end();
	}
}