vue-pdf 展示base64编码pdf，旋转 翻页 放大 缩小 下载

首先看一下是不是大家需要的效果

首先安装vue-pdf

yarn add vue-pdf

然后写一个组件

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">顺时针</el-button>
        <el-button class="btn-def btn-next" @click.stop="counterClock">逆时针</el-button>
        <el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">上一页</el-button>
        <el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">下一页</el-button>
        <el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">放大 </el-button>
        <el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">缩小</el-button>
        <el-button @click="fileDownload(pdfUrl,'pdf文件')">下载</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">顺时针</el-button>
      <el-button class="btn-def btn-next" @click.stop="counterClock">逆时针</el-button>
      <el-button class="btn-def btn-pre" @click.stop="prePage" :disabled="preDisable">上一页</el-button>
      <el-button class="btn-def btn-next" @click.stop="nextPage" :disabled="nextDisable">下一页</el-button>
      <el-button :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">放大 </el-button>
      <el-button :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">缩小</el-button>
      <el-button @click="fileDownload(pdfUrl)">下载</el-button>
    </el-row>
    <!-- <div>进度：{{ loadedRatio }}</div>
    <div>页面加载成功: {{ 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, // 加载进度
        curPageNum: 0,
        scale: 100, // 放大系数
        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
                    // 请求记录接口，保存已读记录
                    this.$http
                        .post(api.ImportantFile, {
                            params: { fid: this.fid }
                        })
                        .then(res => {
                            if (res) {
                                this.$message({
                                    message: '已读 ' + this.fileName,
                                    type: 'success'
                                })
                                this.loadData()
                            }
                        })
                } else {
                    this.nextDisable = false
                }
            }
        },

    methods: {
      // 下载PDF
      fileDownload (data) {
        const filename = this.fileName || '报表.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)
      },
      // 放大
      scaleD () {
        this.scale += 5
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
      },

      // 缩小
      scaleX () {
        if (this.scale === 100) {
          return
        }
        this.scale += -5
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
      },
      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 () {
        // 在只有一页的时候，直接已读
        if (this.pdfSrc) {
            if (this.pageTotalNum === 1) {
                // 请求记录接口，保存已读记录
                this.$http
                    .post(api.ImportantFile, {
                        params: { fid: this.fid }
                    })
                    .then(res => {
                        if (res) {
                            notification.success({
                                message: '完成',
                                description: '已读 ' + this.fileName
                            })
                            // this.$message({
                            //     message: '已读 ' + this.fileName,
                            //     type: 'success'
                            // })
                            this.loadData()
                        }
                    })
            }
        }
    }
  }
</script>

在需要用到它的地方引入它

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