前端vue展示PDFbase64_vue将pdf(base64)在前端展示

<template>
  <div class="h5pdf">
    <div class="ljsx" v-if="!isSX">
      <img class="ljsxtp" src="../../assets/h5sj/ljsx.png">
      <div class="ljsxwz" v-html="yctip">
      </div>
    </div>
    <div v-if="isSX">
      <div class="catips">
        <div class="catipswz">{{pdfToptips}}</div>
      </div>
      <canvas class="cvs" ref="img" :id="'the-canvas'+this.page" :key="this.page">></canvas>
      <img class="img" :src="imgSrc">
      <footer>
        <el-button class="syyBut"
                   @click="subpage">上一页
        </el-button>
        <el-button class="ymxs">{{this.page+'/'+this.pdfList}}
        </el-button>
        <el-button class="xyyBut"
                   @click="addpage">下一页
        </el-button>
      </footer>
    </div>
  </div>
</template>
<script>
// eslint-disable-next-line import/no-duplicates
import PDFJS from 'pdfjs-dist'
// eslint-disable-next-line import/no-duplicates
import pdfjsLib from 'pdfjs-dist'
import html2canvas from 'html2canvas'
// eslint-disable-next-line no-unused-vars
import { zrrJfqdEwmPDF } from '../../api/jfzm/jfzm-api'
 
export default {
  data () {
    return {
      pdfDoc: null,
      pdfList: 0,
      page: 1,
      is_img_show: false,
      imgSrc: null,
      isEnlarge: false,
      enlargeWidth: screen.availWidth,
      isSX: false,
      base64StrPDF: 'JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggMjcxPj4Kc3RyZWFtCjAuNTcgdwowIEcKQlQKL0YxIDE2IFRmCjE4LjQgVEwKMCBnCjU2LjY5IDc4NS4yMCBUZAooT2BZfQAgAEgAZQBsAGwAbwAgAHcAbwByAGwAZAAhKSBUagpFVApCVAovRjEgMTYgVGYKMTguNCBUTAowIGcKMTQxLjczIDc4NS4yMCBUZAooT2BZfQAgAEgAZQBsAGwAbwAgAHcAbwByAGwAZAAhKSBUagpFVApCVAovRjEgMTYgVGYKMTguNCBUTAowIGcKNTYuNjkgNzU2Ljg1IFRkCihUaGlzIGlzIGNsaWVudC1zaWRlIEphdmFzY3JpcHQsIHB1bXBpbmcgb3V0IGEgUERGLikgVGoKRVQKZW5kc3RyZWFtCmVuZG9iago1IDAgb2JqCjw8L1R5cGUgL1BhZ2UKL1BhcmVudCAxIDAgUgovUmVzb3VyY2VzIDIgMCBSCi9NZWRpYUJveCBbMCAwIDU5NS4yOCA4NDEuODldCi9Db250ZW50cyA2IDAgUj4+CmVuZG9iago2IDAgb2JqCjw8L0xlbmd0aCA3Nz4+CnN0cmVhbQowLjU3IHcKMCBHCkJUCi9GMSAxNiBUZgoxOC40IFRMCjAgZwo1Ni42OSA3ODUuMjAgVGQKKERvIHlvdSBsaWtlIHRoYXQ/KSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCjEgMCBvYmoKPDwvVHlwZSAvUGFnZXMKL0tpZHMgWzMgMCBSIDUgMCBSIF0KL0NvdW50IDIKPj4KZW5kb2JqCjcgMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjggMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKOSAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EtQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTEgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMiAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE0IDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItQm9sZE9ibGlxdWUvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTUgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZC9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxNyAwIG9iago8PC9CYXNlRm9udC9UaW1lcy1JdGFsaWMvVHlwZS9Gb250Ci9FbmNvZGluZy9XaW5BbnNpRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTggMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9jU2V0IFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXQovRm9udCA8PAovRjEgNyAwIFIKL0YyIDggMCBSCi9GMyA5IDAgUgovRjQgMTAgMCBSCi9GNSAxMSAwIFIKL0Y2IDEyIDAgUgovRjcgMTMgMCBSCi9GOCAxNCAwIFIKL0Y5IDE1IDAgUgovRjEwIDE2IDAgUgovRjExIDE3IDAgUgovRjEyIDE4IDAgUgo+PgovWE9iamVjdCA8PAo+Pgo+PgplbmRvYmoKMTkgMCBvYmoKPDwKL1Byb2R1Y2VyIChqc1BERiAxLjAuMjcyLWdpdCAyMDE0LTA5LTI5VDE1OjA5OmRpZWdvY3IpCi9DcmVhdGlvbkRhdGUgKEQ6MjAxNTA1MDgxNjA1NTQrMDgnMDAnKQo+PgplbmRvYmoKMjAgMCBvYmoKPDwKL1R5cGUgL0NhdGFsb2cKL1BhZ2VzIDEgMCBSCi9PcGVuQWN0aW9uIFszIDAgUiAvRml0SCBudWxsXQovUGFnZUxheW91dCAvT25lQ29sdW1uCj4+CmVuZG9iagp4cmVmCjAgMjEKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwNjcwIDAwMDAwIG4gCjAwMDAwMDE4NzcgMDAwMDAgbiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMTE3IDAwMDAwIG4gCjAwMDAwMDA0MzcgMDAwMDAgbiAKMDAwMDAwMDU0NSAwMDAwMCBuIAowMDAwMDAwNzMzIDAwMDAwIG4gCjAwMDAwMDA4MjMgMDAwMDAgbiAKMDAwMDAwMDkxOCAwMDAwMCBuIAowMDAwMDAxMDE2IDAwMDAwIG4gCjAwMDAwMDExMTkgMDAwMDAgbiAKMDAwMDAwMTIwOCAwMDAwMCBuIAowMDAwMDAxMzAyIDAwMDAwIG4gCjAwMDAwMDEzOTkgMDAwMDAgbiAKMDAwMDAwMTUwMCAwMDAwMCBuIAowMDAwMDAxNTkzIDAwMDAwIG4gCjAwMDAwMDE2ODUgMDAwMDAgbiAKMDAwMDAwMTc3OSAwMDAwMCBuIAowMDAwMDAyMTAzIDAwMDAwIG4gCjAwMDAwMDIyMjAgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAyMQovUm9vdCAyMCAwIFIKL0luZm8gMTkgMCBSCj4+CnN0YXJ0eHJlZgoyMzI0CiUlRU9G',
      yctip: '',
      pdfToptips: '长按可保存图片，如有多张图片请分别长按保存。'
    }
  },
  mounted () {
    this.isSX = true
    this.initThePDFJSLIB()
    this.loadFile(this.base64StrPDF)
  },
  methods: {
    GetQueryString (name) {
      if (!name) return null
      // 查询参数：先通过search取值，如果取不到就通过hash来取
      var after = window.location.search
      after = after.substr(1) || window.location.hash.split('?')[1]
      // 地址栏URL没有查询参数，返回空
      if (!after) return null
      // 如果查询参数中没有"name"，返回空
      if (after.indexOf(name) === -1) return null
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      // 当地址栏参数存在中文时，需要解码，不然会乱码
      var r = decodeURI(after).match(reg)
      // 如果url中"name"没有值，返回空
      if (!r) return null
      return r[2]
    },
    addpage () {
      if (this.pdfList > this.page) {
        this.page++
        this._renderPage(this.page)
        this.ztp()
      }
    },
    subpage () {
      if (this.page > 1) {
        this.page--
        this._renderPage(this.page)
        this.ztp()
      }
    },
    ztp () {
      html2canvas(this.$refs.img).then(canvas => { // html 转 canvas
        // canvas转img
        this.imgSrc = this.$refs.img.toDataURL('image/png')
        if (this.imgSrc !== '') {
          this.is_img_show = true
        }
      })
    },
    // 初始化pdfjs
    initThePDFJSLIB () {
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
    },
    _renderPage (num) {
      this.pdfDoc.getPage(num).then(page => {
        let canvas = document.getElementById('the-canvas' + num)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr =
            ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio ||
            1
        let ratio = dpr / bsr
        let viewport = page.getViewport(
          this.enlargeWidth / page.getViewport(1).width
        )
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio
        canvas.style.width = viewport.width + 'px'
        canvas.style.height = viewport.height + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext)
      })
    },
    loadFile (base64Str) {
      PDFJS.getDocument({
        data: atob(base64Str),
        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
        cMapPacked: true
      }).then(pdf => {
        this.pdfDoc = pdf
        this.pdfList = this.pdfDoc.numPages
        this.$nextTick(() => {
          this._renderPage(1)
          this.ztp()
        })
      })
    }
  }
}
</script>
<style lang="scss">
  .h5pdf {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9FAFB;
 
    .el-button + .el-button {
      margin-left: 0.4rem;
    }
    .el-button:hover{
      color: #FFFFFF;
      border-color: #1E1E1E;
      background-color: #1E1E1E;
    }
    .ymxs {
      background: #1E1E1E;
      color: #FFFFFF;
      border: none;
      font-size: 18px;
    }
 
    .syyBut {
      background: #1E1E1E;
      color: #FFFFFF;
      border: none;
      font-size: 18px;
      margin-top: 0.1rem;
    }
 
    .xyyBut {
      background: #1E1E1E;
      color: #FFFFFF;
      border: none;
      font-size: 18px;
      margin-top: 0.1rem;
    }
 
    .cvs {
      margin-top: 1rem;
    }
 
    .catips {
      position: fixed;
      top: 0;
      width: 100%;
      height: 0.35rem;
      background: #FEF7DA;
      font-size: 13px;
      color: #FFA922;
    }
 
    .catipswz {
      padding-right: 0.16rem;
      padding-top: 0.08rem;
      padding-bottom: 0.08rem;
    }
 
    .ljsx {
      margin: 2.32rem auto auto auto;
    }
 
    .ljsxwz {
      color: #999999;
      font-size: 18px;
    }
 
    .ljsxtp {
      width: 1.58rem;
      height: 1.505rem;
    }
 
    footer {
      position: fixed;
      bottom: 0;
      z-index: 999;
      width: 100%;
      height: 0.62rem;
      background: #1E1E1E;
      opacity: 0.7;
    }
 
    canvas {
      display: block;
    }
 
    .img {
      position: absolute;
      top: 0.36rem;
      left: 0;
      opacity: 0;
      width: 100%;
      height: 85%;
    }
  }
 
</style>