pdf.js vue-pdf

问题：合成的pdf文件，在pdf.worker插件中后加上的信息不显示

• 解决：在node.modules文件中搜索pdf.worder，在pdf.worker.js中搜索Sig或者直接搜索if (data.fieldType === "Sig")，如下图，把这段代码禁止掉就可以了

问题： 当页面上有签名图片、签章、和后添加的日期、姓名等信息的时候，会出现如下错误提示：

• 解决办法：在node.modules文件中搜索pdf.worder，在build/pdf.worker.js中搜索data: result；将data: result改为data: result instanceof Array ? [] : result
  • 此方法纯属巧记，只是本人问题记录，请勿模仿
  • 最新版vue-pdf不会出现这个问题

后端后添加的文字显示不出来

• import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
• this.src = pdf.createLoadingTask({ url: url, CMapReaderFactory })

vue-pdf页面开发

• 问题： pdf等到上一页加载完毕，再开始加载下一页，一起加载会出现问题（个别后添加文字不显示）
• 解决：@page-loaded="pageLoaded($event)"在pageLoaded中进行页面异步加载

<template>
  <div class="pdf detail" v-show="fileType === 'pdf'">
    <p class="arrow">
    <!-- 上一页 -->
    <!-- <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
    {{currentPage}} / {{pageCount}}
    <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span> -->
    </p>
    <div v-show="pageCount>0">
      <pdf v-for="item in pageCount2" :key="item+'detail'"
      :src="src"
      :page="item"
      @page-loaded="pageLoaded($event)"
      >
      </pdf>
    </div>
    <div v-show="pageCount==0">
      <pdf 
        :src="src"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler">
      </pdf>
    </div>
    <div class="btnBox">
    <button class="btn" @click="showToast=true" v-if="item.status==0">签名</button>
    <button class="btn" @click="$router.push('/contract')" v-else>确定</button>
    </div>
    <div class="toast" v-if="showToast">
      <SignUp class="sign" @init="init"></SignUp>
      <img src="@/assets/img/close1.png" @click="showToast=false" alt="" class="close">
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
import SignUp from './SignUp'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';
export default {
  components: {
    pdf,
    SignUp
  },
  data() {
    return {
      showToast: false,
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: 'pdf', // 文件类型
      id: this.$route.query.id,
      proId: this.$route.query.proId,
      item: {},
      src: '',
      pageCount2:1
    };
  },
  created() {

    this.init();
  },
  methods: {
    pageLoaded($event){
      this.currentPage=$event
      if(this.pageCount2 >= this.pageCount){
        return
      }
      this.$nextTick(()=>{
        this.pageCount2=$event + 1
      })
    },
      // pdf加载时
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    init(){
        this.list = [];
        this.$loading('loading...')
        this.$axios.get(this.URL.BASEURL + this.URL.contractDetail,{
            params:{
              id:this.proId
            }
        }).then((res) => {
            var res=res.data;
            if(res&& res.errno == 0){
                this.item = res.rst;
                this.src = pdf.createLoadingTask({ url: this.item.status>0&&this.item.down_url?this.item.down_url:this.item.pdf_url, CMapReaderFactory })
                if(this.$cookieStore.getCookie('isShowDou')!='true') {
                  this.$cookieStore.setCookie('isShowDou',true)
                  location.reload();
                }
            }else {
                this.$toast(res.err)
            }
        }).catch((err)=>{
            console.log(err)
            this.$loading.close();
        })
    },
  },
  beforeDestroy() {
    this.$cookieStore.setCookie('isShowDou','false')
  },
  watch: {
    pageCount() {
      this.pageCount>0&&this.$loading.close();
    }
  }
};
</script>
<style lang='scss' scoped>
.detail {
  width: 100%;
  height: 100vh;
  .toast {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.64);
    position: fixed;
    top: 0;
    left: 0;
  }
  .sign {
    width: 90%;
    height: 2.32rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 0.1rem;
  }
  .close {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,1.4rem);
    border-radius: 50%;
    width: .26rem;
    height: .26rem;
    text-align: center;
  }
  .btnBox {
    position: fixed;
    bottom: .2rem;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    width: 1.8rem;
    height: .4rem;
    line-height: .4rem;
    background: #fff;
    .btn {
      width: 100%;
      height: 100%;
      border: none;
      font-size: .14rem;
      color: #fff;
      border-radius: .2rem;
      background: linear-gradient(90deg, #0687FF, #1452FF);
      opacity: .84;
    }
  } 
}
</style>