美文网首页
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