150 lines
7.8 KiB
HTML
150 lines
7.8 KiB
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" />
|
||
<title>OFD版式阅读器</title>
|
||
<link rel="icon" href="img/favicon.ico" />
|
||
<link rel="stylesheet" href="css/element-ui.css">
|
||
<link rel="stylesheet" href="css/cnofd.css">
|
||
<script src="js/jquery-3.6.0.min.js"></script>
|
||
<script src="js/jszip-utils-0.1.0.min.js"></script>
|
||
<script src="js/Typr.js"></script>
|
||
<script src="js/Typr.U.js"></script>
|
||
<script src="js/openjpeg.js"></script>
|
||
<script src="js/cnofd.umd.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<noscript>
|
||
<strong>很抱歉，因为没有启用JavaScript，cnofd.js无法正常工作。请启用它以继续。</strong>
|
||
</noscript>
|
||
<div id="app">
|
||
<section class="el-container is-vertical" style="width: 100vw; height: 100vh;">
|
||
<header class="el-header"
|
||
style="height: 32px; background: rgb(71, 71, 71); display: flex; border: 0px solid rgb(232, 232, 232); align-items: center;">
|
||
<div id="openFile" title="打开" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z">
|
||
</path>
|
||
</svg>
|
||
<input id="file" type="file" accept=".ofd" class="hidden" />
|
||
</div>
|
||
<div style="background: rgb(71, 71, 71); display: flex; align-items: center;">
|
||
<div id="separator1" class="horizontalToolbarSeparator"></div>
|
||
<div id="zoomIn" title="放大" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="zoomSelect" class="select-icon" title="缩放比例">
|
||
<select id="zoomValue">
|
||
<option value="width">适合页宽</option>
|
||
<option value="4.0">400%</option>
|
||
<option value="3.0">300%</option>
|
||
<option value="2.0">200%</option>
|
||
<option value="1.5">150%</option>
|
||
<option value="1.2">120%</option>
|
||
<option value="1.1">110%</option>
|
||
<option value="1.0" selected="selected">100%</option>
|
||
<option value="0.9">90%</option>
|
||
<option value="0.8">80%</option>
|
||
<option value="0.6">60%</option>
|
||
<option value="0.5">50%</option>
|
||
<option value="0.25">25%</option>
|
||
</select>
|
||
</div>
|
||
<div id="zoomOut" title="缩小" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="firstPage" title="首页" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M347.6 528.95l383.2 301.02c14.25 11.2 35.2 1.1 35.2-16.95V210.97c0-18.05-20.95-28.14-35.2-16.94L347.6 495.05a21.53 21.53 0 0 0 0 33.9M330 864h-64a8 8 0 0 1-8-8V168a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v688a8 8 0 0 1-8 8">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="prePage" title="上一页" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M689 165.1L308.2 493.5c-10.9 9.4-10.9 27.5 0 37L689 858.9c14.2 12.2 35 1.2 35-18.5V183.6c0-19.7-20.8-30.7-35-18.5z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="pageInfo" class="btn-icon">
|
||
1/0
|
||
</div>
|
||
<div id="nextPage" title="下一页" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="lastPage" title="尾页" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M676.4 528.95L293.2 829.97c-14.25 11.2-35.2 1.1-35.2-16.95V210.97c0-18.05 20.95-28.14 35.2-16.94l383.2 301.02a21.53 21.53 0 0 1 0 33.9M694 864h64a8 8 0 0 0 8-8V168a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v688a8 8 0 0 0 8 8">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="separator2" class="horizontalToolbarSeparator"></div>
|
||
<div id="print" title="打印" class="btn-icon">
|
||
<svg viewbox="64 64 896 896" focusable="false" data-icon="printer" width="1em" height="1em"
|
||
fill="currentColor" aria-hidden="true">
|
||
<path
|
||
d="M820 436h-40c-4.4 0-8 3.6-8 8v40c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-40c0-4.4-3.6-8-8-8zm32-104H732V120c0-4.4-3.6-8-8-8H300c-4.4 0-8 3.6-8 8v212H172c-44.2 0-80 35.8-80 80v328c0 17.7 14.3 32 32 32h168v132c0 4.4 3.6 8 8 8h424c4.4 0 8-3.6 8-8V772h168c17.7 0 32-14.3 32-32V412c0-44.2-35.8-80-80-80zM360 180h304v152H360V180zm304 664H360V568h304v276zm200-140H732V500H292v204H160V412c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4 12 12v292z">
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
<div id="line" onclick="line('1')" title="线条" class="btn-icon">
|
||
黑屏点我
|
||
</div>
|
||
<div id="line" onclick="line('0')" title="线条" class="btn-icon">
|
||
恢复
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="el-main" id="main" style="height: auto; background: rgb(242, 242, 242); padding: 0px;">
|
||
<div id="leftMenu" class="left-section"></div>
|
||
<div id="content" class="main-section">
|
||
</div>
|
||
<div id="loading"
|
||
style="position:absolute; z-index:999; display:none; top:50%; left:50%; transform:translate(-50%,-50%);">
|
||
<img src="img/loading.gif" alt="" />
|
||
</div>
|
||
</main>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="js/cnofd-view.js"></script>
|
||
|
||
</body>
|
||
<script>
|
||
function line(line) {
|
||
var url = window.location.href;
|
||
if(line ==1){
|
||
url = url + "&line=1";
|
||
}else{
|
||
url = url + "&line=0";
|
||
}
|
||
window.location.href = url;
|
||
}
|
||
</script>
|
||
</html> |