1、安装依赖:

npm install vue-pdf --save-dev

2、代码

<template>
  <div class="main">
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
  </div>
</template>

<script>
  //引入vue-pdf
  import pdf from 'vue-pdf'
  // 解决部分文字不显示的问题
  import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
  export default {
     data () {
       return {
         src: '',
         numPages: 0,
         page: 1,
         currentPage: 0
       };
     },
     components: {
       pdf
     },
    created() {
      this.getZdysx();//获取配置文件yml属性
    },
    methods: {
      // 获取配置文件yml属性值
      getZdysx() {
        this.$https({
          url: this.$https.adornUrl('app/getZdzzzsjl'),
          method: 'get',
          // params: this.$https.adornParams({
          //   pripid: sessionStorage.getItem("pripid"),
          // })
        }).then(({
          data
        }) => {
           //pdf字节流busLicContent 
          this.busLicContent ='data:application/pdf;base64,' + JSON.parse(data.getZdzzz).data.jsonMap.businessLicenceInfo.busLicContent;
          this.src = pdf.createLoadingTask({ url: this.busLicContent, CMapReaderFactory });
          this.src.promise.then(pdf => {
             this.numPages = pdf.numPages;
          });
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .main {
    width: 99.6%;
    height: 99%;
  }
</style>

3、结果

 

 

Logo

前往低代码交流专区

更多推荐