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>