vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用

vue-pdf组件官网——https://www.npmjs.com/package/vue-pdf

1、安装

npm install vue-pdf

或

yarn add vue-pdf

2、基本使用-示例

index.vue

<template>
  <pdf src="./path/to/static/relativity.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

3、将base64 的pdf文件流转换成pdf并预览

1、安装依赖：

npm install vue-pdf --save-dev

2、代码

示例1

// data为后端给的base64格式的pdf
import { data } from "../../tempData";
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
// html
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
  data () {
    return {
      src: '',
      numPages: 0,
      page: 1,
      currentPage: 0
    };
  }，
  components: {
    pdf
  },
  mounted () {
    let da = data.fileToBase64
    let datas = 'data:application/pdf;base64,' + da
    this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
    this.src.promise.then(pdf => {
      this.numPages = pdf.numPages;
    });
  },

示例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、效果