安装: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>

版权声明:本文为FormerWhite原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/FormerWhite/p/12487321.html