Vue-pdf displays base64 encoded PDF. Rotate the page to zoom in and out

Let’s first see if it’s what you wantFirst install vue-pdf

yarn add vue-pdf

Then write a component

AppPdf.vue


<template>
  <div class="pdf">
    <div class="main">
      <el-row :gutter="24" style="text-align:center" v-show="pdfSrc">
        <el-button class="btn-def btn-pre" @click.stop="clock">clockwise</el-button>
        <el-button class="btn-def btn-next" @click.stop="counterClock">counterclockwise</el-button>
        <el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">The previous page</el-button>
        <el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">The next page</el-button>
        <el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">amplification</el-button>
        <el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">narrow</el-button>
        <el-button @click="FileDownload (pdfUrl, 'PDF file')">download</el-button>
        <div>{{ pageNum }}/{{ pageTotalNum }}</div>
      </el-row>
      <pdf
        ref="pdf"
        :src="pdfSrc"
        :page="pageNum"
        :rotate="pageRotate"
        @password="password"
        @progress="loadedRatio = $event"
        @page-loaded="pageLoaded($event)"
        @num-pages="pageTotalNum=$event"
        @error="pdfError($event)"
        @link-clicked="page = $event">
      </pdf>
    </div>

    <el-row :gutter="24" style="text-align:center" v-show="pdfSrc">
      <div>{{ pageNum }}/{{ pageTotalNum }}</div>
      <el-button class="btn-def btn-pre" @click.stop="clock">clockwise</el-button>
      <el-button class="btn-def btn-next" @click.stop="counterClock">counterclockwise</el-button>
      <el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">The previous page</el-button>
      <el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">The next page</el-button>
      <el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">amplification</el-button>
      <el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">narrow</el-button>
      <el-button @click="fileDownload(pdfUrl)">download</el-button>
    </el-row>
    <! - < div > progress: {{loadedRatio}} < / div > < div > page load success: {{curPageNum}} < / div > -- >
  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  import api from '@/api/index'
  import notification from 'ant-design-vue/es/notification'

  export default {
    name: 'AppPdf'.components: {
      pdf
    },
    props: {
            pdfSrc: {
                type: String.required: true
            },
            fileName: {
                type: String.required: true
            },
            fid: {
                type: Number.required: true
            },
            loadData: {
                type: Function.required: true
            }
        },
    data () {
      return {
        preDisable: true.nextDisable: false.pdfUrl: ' '.pageNum: 1.pageTotalNum: 1.pageRotate: 0.loadedRatio: 0.// Load progress
        curPageNum: 0.scale: 100.// The amplification factor
        idx: -1}},watch: {
            pdfSrc () {
                this.curPageNum = 1
                this.pageNum = 1
            },
            fileName () {
            },
            pageNum () {
                if (this.pageNum === 1) {
                    this.preDisable = true
                } else {
                    this.preDisable = false
                }
                if (this.pageNum === this.pageTotalNum) {
                    this.nextDisable = true
                    // Request the record interface to save the read record
                    this.$http
                        .post(api.ImportantFile, {
                            params: { fid: this.fid }
                        })
                        .then(res= > {
                            if (res) {
                                this.$message({
                                    message: 'read' + this.fileName,
                                    type: 'success'
                                })
                                this.loadData()
                            }
                        })
                } else {
                    this.nextDisable = false}}},methods: {
      / / download PDF
      fileDownload (data) {
        const filename = this.fileName || 'statements. XLS'
        var element = document.createElement('a')
        element.setAttribute('href'.encodeURI(this.pdfSrc))
        element.setAttribute('download'.'LoginInquiry.pdf')
        element.setAttribute('download', filename)
        element.style.display = 'none'
        document.body.appendChild(element)
        element.click()
        document.body.removeChild(element)
      },
      Enlarge / /
      scaleD () {
        this.scale += 5
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + The '%'
      },

      / / to narrow
      scaleX () {
        if (this.scale === 100) {
          return
        }
        this.scale += -5
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + The '%'
      },
      prePage () {
        var p = this.pageNum
        p = p > 1 ? p - 1 : this.pageTotalNum
        this.pageNum = p
      },
      nextPage () {
        var p = this.pageNum
        p = p < this.pageTotalNum ? p + 1 : 1
        this.pageNum = p
      },
      clock () {
        this.pageRotate += 90
      },
      counterClock () {
        this.pageRotate -= 90
      },
      password (updatePassword, reason) {
        updatePassword(prompt('password is "123456"'))
      },
      pageLoaded (e) {
        this.curPageNum = e
      },
      pdfError (error) {
        console.error(error)
      },
      pdfPrintAll () {
        this.$refs.pdf.print()
      },
      pdfPrint () {
        this.$refs.pdf.print(100[1.2])
      }
    },
    updated () {
        // Read directly when there is only one page
        if (this.pdfSrc) {
            if (this.pageTotalNum === 1) {
                // Request the record interface to save the read record
                this.$http
                    .post(api.ImportantFile, {
                        params: { fid: this.fid }
                    })
                    .then(res= > {
                        if (res) {
                            notification.success({
                                message: 'complete'.description: 'read' + this.fileName
                            })
                            // this.$message({
                            // message: 'read' + this.filename,
                            // type: 'success'
                            // })
                            this.loadData()
                        }
                    })
            }
        }
    }
  }
</script>

Copy the code

Introduce it where you need it

  import AppPdf from './AppPdf.vue'
  <app-pdf :pdfSrc="base64Str" :fileName="fileName" :fid="fid" :loadData="loadData" ref="son"></app-pdf>
Copy the code