ofd-view
/
ofd_viewer.html

<!DOCTYPE html>
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta charset="UTF-8">
    <title>OFD文件预览</title>
    <% include("../../layout/cssPart.html"){} %>
    <link rel="stylesheet" href="${ctxPath}/static/view/module/ofd/ofd.css">
    <script src="${ctxPath}/static/view/module/ofd/ofd.umd.js?v=1.3"></script>
</head>
<style>
.top-header{
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    border-bottom: 1px dashed #ddd;
    line-height: 30px;
    text-align: center;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ofd-item{margin:0 auto;position:relative;background:#fff}
.main-div{
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    margin-top: 70px;
}
    .top-btn{
        margin: 0 10px;
    }
    #pageInfo{
        background: #6665652e;
        padding: 0 10px;
        border-radius: 5px;
    }
    .top-select{
        border: none;
        height: 28px;
        text-align: center;
        border-radius: 5px;
        background:#6665652e
    }

</style>
<body>
<div id="app">
    <div class="top-header" >
        <button class="layui-btn layui-btn-sm top-btn" id="firstPage" onclick="firstPage();"><i class="layui-icon layui-icon-home"></i>首页</button>
        <button class="layui-btn layui-btn-sm top-btn" id="lastPage" onclick="lastPage();"><i class="layui-icon layui-icon-radio"></i>尾页</button>
        <button class="layui-btn layui-btn-sm icon-btn top-btn" id="zoomIn" onclick="zoomIn()"><i class="layui-icon layui-icon-addition"></i> 放大</button>
        <span id="zoomSelect" class="top-btn"  title="缩放比例">
                <select id="zoomValue" class="top-select" name="city" lay-verify="required">
                 <option value="width">适合页宽</option>
                    <option value="8">180%</option>
                    <option value="7">150%</option>
                    <option value="6">120%</option>
                    <option value="5" selected="selected">100%</option>
                    <option value="4">80%</option>
                    <option value="3">70%</option>
                    <option value="2">50%</option>
                </select>
            </span>
        <button class="layui-btn layui-btn-sm top-btn" id="zoomOut" onclick="zoomOut()"><i class="layui-icon layui-icon-subtraction"></i>缩小</button>
        <button class="layui-btn layui-btn-sm top-btn" id="prePage" onclick="prePage();"><i class="layui-icon layui-icon-prev"></i>上一页</button>
        <span id="pageInfo" class=" top-btn"> 1/0</span>
        <button class="layui-btn layui-btn-sm  top-btn" id="nextPage" onclick="nextPage();"><i class="layui-icon layui-icon-next"></i>下一页</button>
        <button class="layui-btn layui-btn-sm top-btn" id="print" onclick="print();"><i class="layui-icon layui-icon-print"></i>打印</button>
        <button class="layui-btn layui-btn-sm top-btn" id="download" onclick="ofddownload();"><i class="layui-icon layui-icon-download-circle"></i>下载</button>
    </div>
    <div class="main-div" id="mainApp" style="height: auto;overflow: hidden;background: rgb(242, 242, 242); padding: 0px;overflow: scroll;">
        <div id="ofdContainer" class="main-section">
        </div>
    </div>
</div>
<% include("../../layout/jsPart.html"){} %>
<script src="${ctxPath}/static/view/module/ofd/ofdview.js?v=2"></script>
<script>
     layui.use(['layer', 'form', 'admin'], function () {
     var $ = layui.jquery;
     var layer = layui.layer;
     var form = layui.form;
     var admin = layui.admin;
     var fileId="${fileId}";
     viewOFD("${fileId}");
     //		OFD文件预览
     function viewOFD(fileId) {
         layer.load(2);
         parseOfdByfile("/system/file/downloadFile/"+fileId,"file",1000);
     };
    $(window).scroll(function() {
        scrool();
    });

    $("#zoomValue").change(function() {
        zoomChange();
    });
 });
</script>
</body>
</html>