index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width,initial-scale=1" />
  7. <title>OFD版式阅读器</title>
  8. <link rel="icon" href="img/favicon.ico" />
  9. <link rel="stylesheet" href="css/element-ui.css">
  10. <link rel="stylesheet" href="css/cnofd.css">
  11. <script src="js/jquery-3.6.0.min.js"></script>
  12. <script src="js/jszip-utils-0.1.0.min.js"></script>
  13. <script src="js/Typr.js"></script>
  14. <script src="js/Typr.U.js"></script>
  15. <script src="js/openjpeg.js"></script>
  16. <script src="js/cnofd.umd.min.js"></script>
  17. </head>
  18. <body>
  19. <noscript>
  20. <strong>很抱歉,因为没有启用JavaScript,cnofd.js无法正常工作。请启用它以继续。</strong>
  21. </noscript>
  22. <div id="app">
  23. <section class="el-container is-vertical" style="width: 100vw; height: 100vh;">
  24. <header class="el-header"
  25. style="height: 32px; background: rgb(71, 71, 71); display: flex; border: 0px solid rgb(232, 232, 232); align-items: center;">
  26. <div id="openFile" title="打开" class="btn-icon">
  27. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  28. aria-hidden="true">
  29. <path
  30. 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">
  31. </path>
  32. </svg>
  33. <input id="file" type="file" accept=".ofd" class="hidden" />
  34. </div>
  35. <div style="background: rgb(71, 71, 71); display: flex; align-items: center;">
  36. <div id="separator1" class="horizontalToolbarSeparator"></div>
  37. <div id="zoomIn" title="放大" class="btn-icon">
  38. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  39. aria-hidden="true">
  40. <path
  41. 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">
  42. </path>
  43. </svg>
  44. </div>
  45. <div id="zoomSelect" class="select-icon" title="缩放比例">
  46. <select id="zoomValue">
  47. <option value="width">适合页宽</option>
  48. <option value="4.0">400%</option>
  49. <option value="3.0">300%</option>
  50. <option value="2.0">200%</option>
  51. <option value="1.5">150%</option>
  52. <option value="1.2">120%</option>
  53. <option value="1.1">110%</option>
  54. <option value="1.0" selected="selected">100%</option>
  55. <option value="0.9">90%</option>
  56. <option value="0.8">80%</option>
  57. <option value="0.6">60%</option>
  58. <option value="0.5">50%</option>
  59. <option value="0.25">25%</option>
  60. </select>
  61. </div>
  62. <div id="zoomOut" title="缩小" class="btn-icon">
  63. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  64. aria-hidden="true">
  65. <path
  66. 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">
  67. </path>
  68. </svg>
  69. </div>
  70. <div id="firstPage" title="首页" class="btn-icon">
  71. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  72. aria-hidden="true">
  73. <path
  74. 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">
  75. </path>
  76. </svg>
  77. </div>
  78. <div id="prePage" title="上一页" class="btn-icon">
  79. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  80. aria-hidden="true">
  81. <path
  82. 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">
  83. </path>
  84. </svg>
  85. </div>
  86. <div id="pageInfo" class="btn-icon">
  87. 1/0
  88. </div>
  89. <div id="nextPage" title="下一页" class="btn-icon">
  90. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  91. aria-hidden="true">
  92. <path
  93. 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">
  94. </path>
  95. </svg>
  96. </div>
  97. <div id="lastPage" title="尾页" class="btn-icon">
  98. <svg viewbox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor"
  99. aria-hidden="true">
  100. <path
  101. 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">
  102. </path>
  103. </svg>
  104. </div>
  105. <div id="separator2" class="horizontalToolbarSeparator"></div>
  106. <div id="print" title="打印" class="btn-icon">
  107. <svg viewbox="64 64 896 896" focusable="false" data-icon="printer" width="1em" height="1em"
  108. fill="currentColor" aria-hidden="true">
  109. <path
  110. 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">
  111. </path>
  112. </svg>
  113. </div>
  114. <div id="line" onclick="line('1')" title="线条" class="btn-icon">
  115. 黑屏点我
  116. </div>
  117. <div id="line" onclick="line('0')" title="线条" class="btn-icon">
  118. 恢复
  119. </div>
  120. </div>
  121. </header>
  122. <main class="el-main" id="main" style="height: auto; background: rgb(242, 242, 242); padding: 0px;">
  123. <div id="leftMenu" class="left-section"></div>
  124. <div id="content" class="main-section">
  125. </div>
  126. <div id="loading"
  127. style="position:absolute; z-index:999; display:none; top:50%; left:50%; transform:translate(-50%,-50%);">
  128. <img src="img/loading.gif" alt="" />
  129. </div>
  130. </main>
  131. </section>
  132. </div>
  133. <script src="js/cnofd-view.js"></script>
  134. </body>
  135. <script>
  136. function line(line) {
  137. var url = window.location.href;
  138. if(line ==1){
  139. url = url + "&line=1";
  140. }else{
  141. url = url + "&line=0";
  142. }
  143. window.location.href = url;
  144. }
  145. </script>
  146. </html>