vue-pdf 插件预览

安装：npm install --save vue-pdf
引入pdf并注册组件
import pdf from 'vue-pdf'
components: {
pdf
},

<!-- 预览 -->
    </el-dialog>
            <el-dialog    :close-on-click-modal='false'  :close-on-press-escape='false' :append-to-body="true"
                      :title="$t('message.Preview')"
                      :visible.sync="lookLog"
                      width="70%"
                      style="margin-top:-80px"
                      @closed="lookLogClose">
            <div class="pdf" v-show="fileType === 'pdf'">
                <p class="arrow" style="text-align: center;font-size: 18px;">
                    <!-- <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">{{ $t('message.PreviousPage') }}</span> -->
                    <el-button style="margin-right:10px" size="small" type="primary" class="turn" :class="{grey: currentPage==1}" @click="changePdfPage(0)">{{ $t('message.PreviousPage') }}</el-button>
                    {{currentPage}} / {{pageCount}}
                    <!-- <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">{{ $t('message.NextPage') }}</span> -->
                    <el-button style="margin-left:10px" size="small" type="primary" class="turn" :class="{grey: currentPage==pageCount}" @click="changePdfPage(1)">{{ $t('message.NextPage') }}</el-button>
                </p>
                <pdf
                        class="pdf"
                        style="width:100%;overflow:auto;height:600px"
                        :src="src"
                        :page="currentPage"
                        @num-pages="pageCount=$event"
                        @page-loaded="currentPage=$event"
                        @loaded="loadPdfHandler">
                </pdf>




            </div>
        </el-dialog>

 changePdfPage (val) {
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
showlookLog(param){
        postForm(':9001/resourceFile/filePreviewRoute', {
          fileId: param.id,
          fileType:'data',
          userId:JSON.parse(sessionStorage.getItem('user')).userId
        }).then(res => {
          this.odFilePath=res.data.data
          if(param.fileSuffix=='mp4'){
            this.fileType='video'
            this.src = res.data.data
          }else{
            this.fileType='pdf'
            //this.src = ip+":8080"+ res.data.data
                this.src=res.data.data
          }
          this.lookLog=true
          
        })
      },
     lookLogClose(){
        this.src=''
          postForm(':9006/userManual/deletedPdfFile', {
            filePath:this.odFilePath,
          }).then(res => {
        })
      },

在ie中 遇到由后端转换office返回pdf格式时，显示空白的兼容问题，尚未明确原因，可能是插件字体的不兼容。最后用iframe实现的预览，
只需要将<pdf></pdf>全部替换掉
           <!-- iframe ie中使用前提：电脑中装有pdf阅读器，如：Adobe Reader，否则会直接下载要预览的文件-->
                 <iframe  :src="src" frameborder="0" width="100%" height="600px"></iframe>