分享一个vue的插件，查看pdf文件 pdfh5

一、安装

npm install pdfh5

二、写一个公共组件toUpdate，这是一个pdf的详细信息

<template>
  <div id="app">
    <van-sticky>
      <van-nav-bar title="详细内容" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
    data() {
      return {
        pdfh5: null,
      };
    },
    props: {
      url: {
        type: String
      },
      onShow: {
        type: Function,
        default: null
      }
    },
    watch: {
      url(url) {
        this.preview(url);
      }
    },
    mounted() {
      this.preview(this.url);
    },
    created() {},
    methods: {
      onClickLeft() {
        if (this.onShow) {
          this.onShow()
        }
      },
      preview(url) {
        this.pdfh5 = new Pdfh5("#demo", {
          pdfurl: url, //文件地址
        });
      },
    },
  }
</script>

<style>
  @import "pdfh5/css/pdfh5.css";
  .toUpdate {
    min-height: 100vh;
    font-size: 4375rem;
    background: rgba(255, 255, 255, .5);
  }
</style>

三、在列表页调用组件，这样每次点击就会把地址传到toUpdate组件，然后由toUpdate组件来解析

<template>
  <div class="uploadFile">
    <van-sticky >
      <van-nav-bar title="上传文档" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="file-box">
      <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="finishedText"
        @load="onLoad(page)">
        <div class="file" v-for="(item,index) in pdfList" :key="index" @click="preview(item.web_url,item.fupload)">
          <div class="file-text">
            <span>{{item.filename}}</span>
          </div>
        </div>
      </van-list>
    </div>
		<van-popup v-model="show" :style="{ height: '100%',width:'100%' }">
            <!-- 传关闭弹窗的方法以及pdf服务器地址给toUpdate组件 -->
		    <toUpdate :onShow="onShow" :url="url"></toUpdate>
		</van-popup>
  </div>
</template>

<script>
  import toUpdate from '@/components/consubpage/toUpdate/toUpdate'
  export default {
    components: {
      toUpdate
    },
    data() {
      return {
        pdfList: [],
        name: '',
        show: false,
        url: '',
        loading: false,
        finished: false,
        page: 1,
        pagesize: 40,
        finishedText: '---我也是有底线的---',
      }
    },
    mounted() {},
    created() {
      this.onLoad(this.page)
    },
    methods: {
      onClickLeft() {
        this.$router.back();
      },
      preview(url, fupload) {
        //点击得到pdf服务器地址
        this.show = true
        this.url = url + fupload
      },
      onLoad(page) {
        this.page++;
        let that = this;
        let params = {
          curpage: page,
          pagesize: that.pagesize,
        }
        that.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中..."
        });
        that.getAxios('pdf列表页的接口', params).then((res) => {
          if (res.code == 1) {
            let data = res.data;
            that.$toast.clear();
            that.loading = false;
            if (data == null || data.length == 0) {
              that.finished = true
              return
            }
            if (data.length > 0) {
              that.pdfList = that.pdfList.concat(data)
            }
          }
        }).catch(() => {})
      },
      onShow(){
        //创建一个方法给toUpdate组件调用
        this.show = false;
      }
    }
  }
</script>

<style>
  .uploadFile {
    background-color: #f0f0f0;
    color: #333;
    min-height: 100vh;
    font-size: 0.4375rem;
  }
  .uploadFile .van-sticky--fixed{
    z-index: 1;
  }
  .uploadFile .file-box {
    width: 94%;
    margin: auto;
    padding-bottom: 0.3125rem;
  }

  .uploadFile .file {
    width: 100%;
    padding: 0.3125rem 0;
    background-color: #fff;
    border-radius: 0.3125rem;
    margin: 0.3125rem 0;
  }

  .uploadFile .file-text {
    width: 94%;
    margin: auto;
  }

  .uploadFile .wrapper {
    width: 100%;
    height: 98%;
    background-color: #fff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
  }

  .uploadFile .preview {
    padding: 0.15625rem 0.25rem;
    border-radius: 0.125rem;
    background-color: #07c160;
    color: #fff;
  }
</style>

四、本dome运用了vantUI框架，最后附上pdfh5的api,里面有更多详情以及介绍https://gitee.com/pjjg/pdfh5