实现的思路:
1.利用pdf.js 的 viewer.html 进行渲染pdf预览界面
2.利用Modal加iframe嵌套展示pdf预览界面
iframe中的 src="../../js/app/web/viewer.html?file=/api/user/help/manual" 路径可以分为两部分,即为问号“?” 前 viewer.html 的相对路径;问号“?file=” 后 跟的就是pdf的资源路径;
<style>
.show-detail{
display: flex;
flex-direction: column;
align-items: center;
height: 600px;
overflow: auto
}
</style>
<!-- 自己的路径 -->
<div id="pdf_modal" v-if="clear" >
<Modal v-model="showFlag"
title="PDF预览"
:mask-closable="false"
@on-cancel="clickF"
footer-hide
height="600"
width="1046">
<iframe style="width: 100%;height: 600px;" src="../../js/app/web/viewer.html?file=/api/user/help/manual"></iframe>
</Modal>
</div>
<script type="text/javascript">
new Vue({
el: '#pdf_modal', // 用于挂载要管理的元素
name:'System_Help',
data() {
return{
clear: false,
showFlag:true
}
},
mounted() {
this.clear = true
},
methods:{
clickF(){
this.clear= false
}
}
})
</script>
网友评论