vue2 使用vue-pdf预览pdf文件

1.下载

npm install vue-pdf --save-dev

坑：在安装后运行报错如下：

在网上也查了很多解决办法，最终通过以下方式解决：

npm install --save-dev @babel/runtime 

网上说的原因是：
node_modules\pdfjs-dist\lib\web\ui_utils.js 文件下缺少引用插件

2.使用

新建一个vue文件CPDF.vue

<template>
    <div class="pdf">
        <!-- <Mheader status="useAgreement" class="head" /> -->
        <div class="main">
            <!-- {{currentPage}} / {{pageCount}} -->
            <pdf :src="src" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>
            <!-- <button @click="changePdfPage(1)">+</button> -->
        </div>
        <div class="footers">
          <el-row class="footer-content" type="flex" justify="center">
              <el-col :sm="4">
                  <el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD" size="mini" circle type="primary" icon="el-icon-zoom-in" ></el-button>
              </el-col>
              <el-col :sm="4">
                  <el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX" size="mini" circle type="primary" icon="el-icon-zoom-out"></el-button>
              </el-col>
              <el-col :sm="4">
                  <el-button :disabled="disabled1" :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)" size="mini" type="primary" round>上一页</el-button>
              </el-col>
              <el-col :sm="4">
                  <el-button :disabled="disabled2" :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)" size="mini" type="primary" round>下一页</el-button>
              </el-col>
          </el-row>
        </div>

    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data() {
    return {
      currentPage: 1,
      pageCount: 0,
      scale: 100, // 放大系数
      idx: -1,
      loadedRatio: 0,
      disabled1: true,
      disabled2: false
    }
  },

  watch: {
    'src': function(newVal) {
      this.disabled1 = true
      this.disabled2 = false
    }
  },
  props: {
    src: {type: String, default: ''}
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.src = pdf.createLoadingTask(this.src)

  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      console.log(this.currentPage)
      if (val === 0) {
        if (this.currentPage > 1) {
          this.currentPage--
          this.disabled2 = false
        } else {
          this.disabled1 = true
        }
      } else {
        this.disabled2 = false
      }
      if (val === 1) {
        if (this.currentPage < this.pageCount) {
          this.currentPage++
          this.disabled1 = false
        } else {
          this.disabled2 = true
        }
      } else {
        this.disabled1 = false
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 放大
    scaleD() {
      this.scale += 5
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + '%'
    },

    // 缩小
    scaleX() {
      if (this.scale === 100) {
        return
      }
      this.scale += -5
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + '%'
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
    }
  },
  mounted() {}
}
</script>
<style scoped lang="stylus">
.pdf
  .main
    width 90%
  .footers
    position: fixed;
    bottom: 0;
    width: 75%;
    .footer-content
      background #fff
</style>

4.引用

1）html

<CPdf :src="pdf路径"></CPdf>

2)js

注意：我是将pdf文件放到oss线上的，直接引用就可以，如果要使用本地文件，要放到static文件夹下，不然会报错，同时还要注意打包后的路径对不对。

坑：
打包之后用谷歌浏览器打开报错如下，导致直接不能打开该页面，服务部署好之后访问直接打不开页面报404

原因：原因在于chrome不允许通过本地文件访问使用Web Worker，网上的解决办法是：
1）使用别的浏览器重新进行尝试，比如IE浏览器。（这个试过确实有效）
2）将程序部署在服务器下。（我的是前端服务布好之后不能打开）
也有网上说可以不用webPack安装，直接将pdf的js文件放在static下，找了一下时间关系具体还是没搞出来，只能暂时像这样，后面找到解决办法了再更新相关。