美文网首页
pdf.js 弹窗预览pdf,支持文字搜索

pdf.js 弹窗预览pdf,支持文字搜索

作者: 安北分享 | 来源:发表于2021-11-10 13:57 被阅读0次

实现的思路:

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>

相关文章

网友评论

      本文标题:pdf.js 弹窗预览pdf,支持文字搜索

      本文链接:https://www.haomeiwen.com/subject/bgnbzltx.html