ODF预览组件更新
陈精华
parent
4c0aa3cfc3
commit
cf336781d8
|
|
@ -1 +0,0 @@
|
|||
.upload-icon[data-v-b0082a62]{padding-left:10px;padding-right:10px;background-color:#3b5fe8;border-color:#5867dd;color:#fff;margin:1px}.scale-icon[data-v-b0082a62],.upload-icon[data-v-b0082a62]{display:flex;cursor:pointer;justify-content:center;align-items:center;height:28px;border-radius:1px;font-weight:500;font-size:12px}.scale-icon[data-v-b0082a62]{width:33px;background-color:#f5f5f5;color:#333;text-align:center;padding:2px}.scale-icon[data-v-b0082a62] :active,.scale-icon[data-v-b0082a62] :hover{color:#3b5fe8}.text-icon[data-v-b0082a62]{display:flex;cursor:pointer;justify-content:center;align-items:center;height:28px;width:90%;background-color:#3b5fe8;border-radius:1px;border-color:#5867dd;font-weight:500;font-size:10px;color:#fff;margin-top:20px}.hidden[data-v-b0082a62]{display:none!important}.SealContainer[data-v-b0082a62]{z-index:99999;position:fixed;left:0;top:0;width:100vw;height:100vh}.SealContainer .mask[data-v-b0082a62]{background:#000;opacity:.3}.content-title[data-v-b0082a62]{font-size:16px;text-align:center;border-bottom:1px solid #3b5fe8;color:#3b5fe8;margin-top:10px}.SealContainer-content[data-v-b0082a62]{width:100%;height:100%}.SealContainer-content[data-v-b0082a62],.SealContainer-layout[data-v-b0082a62]{position:relative;overflow-y:auto;background:#fff;display:flex;flex-direction:column;padding:10px;align-items:center}.SealContainer-layout[data-v-b0082a62]{width:60%;height:80vh;z-index:100}.subcontent[data-v-b0082a62]{width:80%;display:flex;flex-direction:column;text-align:left;margin-bottom:10px;font-family:simsun}.subcontent .title[data-v-b0082a62]{font-weight:600}.subcontent .value[data-v-b0082a62]{font-weight:400;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.left-section[data-v-b0082a62]{position:fixed;width:88px;height:100%;background:#f5f5f5;border:1px solid #e8e8e8;align-items:center;display:flex;flex-direction:column}.main-section[data-v-b0082a62]{padding-top:20px;margin-left:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:grey;overflow:hidden}@media (max-width:767px){.SealContainer-layout[data-v-b0082a62]{position:relative;width:90%;height:90vh;overflow-y:auto;background:#fff;z-index:100;display:flex;flex-direction:column;padding:10px;align-items:center}.subcontent[data-v-b0082a62]{width:95%;display:flex;flex-direction:column;text-align:left;margin-bottom:10px;font-family:simsun}.left-section[data-v-b0082a62]{position:fixed;width:0;height:100%;background:#f5f5f5;border:1px solid #e8e8e8;align-items:center;display:none;flex-direction:column}.main-section[data-v-b0082a62]{padding-top:20px;margin-left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:grey;overflow:hidden}}#app{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}body{margin:0}@font-face{font-family:sSun;src:url(fonts/xbst.5215475c.ttf)}@font-face{font-family:simsun;src:url(fonts/simsun.b4a89f58.ttf)}@font-face{font-family:simkai;src:url(fonts/simkai.6078b506.ttf)}@font-face{font-family:simfang;src:url(fonts/SIMFANG.65ab65f8.TTF)}@font-face{font-family:simhei;src:url(fonts/simhei.ab5640f6.ttf)}.gray{-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,214 @@
|
|||
.horizontalToolbarSeparator {
|
||||
display: inline-block;
|
||||
margin: 0 10px -2px;
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
-webkit-box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
|
||||
}
|
||||
.btn-icon {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
//background-color: rgb(59, 95, 232);
|
||||
border-radius: 1px;
|
||||
border-color: #44AAFF;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
margin: 1px;
|
||||
}
|
||||
.btn-icon :active {
|
||||
color: rgb(0, 245, 255);
|
||||
}
|
||||
.btn-icon :hover {
|
||||
color: rgb(0, 245, 255);
|
||||
}
|
||||
.text-icon {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
width: 90%;
|
||||
background-color: rgb(59, 95, 232);
|
||||
border-radius: 1px;
|
||||
border-color: #44AAFF;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 1px;
|
||||
border-color: #44AAFF;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #44AAFF;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
position: fixed;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
background:#F5F5F5;
|
||||
border: 1px solid #e8e8e8;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column
|
||||
}
|
||||
.main-section {
|
||||
padding-top: 0px;
|
||||
margin-left: 0px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
background: #F2F2F2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.main-section-font {
|
||||
background: white;
|
||||
margin-left: 88px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.left-section {
|
||||
position: fixed;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
background:#F5F5F5;
|
||||
border: 1px solid #e8e8e8;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.main-section {
|
||||
padding-top: 0px;
|
||||
margin-left:0px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
background: #808080;
|
||||
overflow: hidden
|
||||
}
|
||||
.main-section-font {
|
||||
background: white;
|
||||
margin-left: 0px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
body { margin: 0; }
|
||||
|
||||
@font-face {
|
||||
font-family: "simsun";
|
||||
src: url(./fonts/simsun.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "simkai";
|
||||
src: url(./fonts/simkai.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "simhei";
|
||||
src: url(./fonts/simhei.woff);
|
||||
}
|
||||
|
||||
.gray {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: gray;
|
||||
filter: gray;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family:element-icons;src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal
|
||||
}[class*=" el-icon-"],[class^=el-icon-] {
|
||||
font-family: element-icons!important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
position: relative;
|
||||
margin: 0 auto 50px;
|
||||
background: #FFF;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.3);
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.el-dialog.is-fullscreen {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
height: 100%;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.el-dialog__wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px 20px 10px
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 0;
|
||||
background: 0 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn .el-dialog__close {
|
||||
color: #909399
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: #409EFF
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 30px 20px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
text-align: right;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.el-autocomplete-suggestion.is-loading .el-icon-loading {
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.el-container {
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-ms-flex-preferred-size: auto;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0
|
||||
}
|
||||
|
||||
.el-container.is-vertical {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.el-header {
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.el-main {
|
||||
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
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -1,20 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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.js</title>
|
||||
<link href="chunk-vendors.css" rel="stylesheet">
|
||||
<link href="app.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
<!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/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="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>
|
||||
</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>
|
||||
|
||||
</script>
|
||||
<script src="chunk-vendors.c0cd1494.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,415 @@
|
|||
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
||||
|
||||
$("#openFile").click(function() {
|
||||
openFile();
|
||||
});
|
||||
|
||||
$("#file").change(function() {
|
||||
fileChanged();
|
||||
});
|
||||
|
||||
$("#zoomIn").click(function() {
|
||||
zoomIn();
|
||||
});
|
||||
|
||||
$("#zoomOut").click(function() {
|
||||
zoomOut();
|
||||
});
|
||||
|
||||
$("#zoomValue").change(function() {
|
||||
zoomChange();
|
||||
});
|
||||
|
||||
$("#firstPage").click(function() {
|
||||
firstPage();
|
||||
});
|
||||
|
||||
$("#prePage").click(function() {
|
||||
prePage();
|
||||
});
|
||||
|
||||
$("#nextPage").click(function() {
|
||||
nextPage();
|
||||
});
|
||||
|
||||
$("#lastPage").click(function() {
|
||||
lastPage();
|
||||
});
|
||||
|
||||
$("#print").click(function() {
|
||||
print();
|
||||
});
|
||||
|
||||
$("#main").scroll(function() {
|
||||
scrool();
|
||||
});
|
||||
|
||||
window.onresize = function() {
|
||||
return function() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
|
||||
var nowleft = 0;
|
||||
if (contentDiv.childNodes[0]) nowleft = contentDiv.childNodes[0].offsetLeft;
|
||||
} ();
|
||||
};
|
||||
|
||||
if (this.isMobile()) {
|
||||
if (document.getElementById("zoomSelect")) document.getElementById("zoomSelect").style.display = "none";
|
||||
if (document.getElementById("openFile")) document.getElementById("openFile").style.display = "none";
|
||||
if (document.getElementById("print")) document.getElementById("print").style.display = "none";
|
||||
if (document.getElementById("separator1")) document.getElementById("separator1").style.display = "none";
|
||||
if (document.getElementById("separator2")) document.getElementById("separator2").style.display = "none";
|
||||
}
|
||||
|
||||
function isMobile() {
|
||||
var flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
||||
return flag;
|
||||
}
|
||||
|
||||
function isIE() {
|
||||
var navigator = window.navigator.userAgent;
|
||||
if (navigator.indexOf("MSIE") > 0 || navigator.indexOf("Trident") > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
this.screenWidth = document.body.clientWidth;
|
||||
|
||||
// cnofd提供浏览器端和服务端两种OFD版式文件的解析渲染模式。
|
||||
// 服务器渲染模式；浏览器端渲染时，请注释以下两行代码
|
||||
//Object(cnofd["setRenderMode"])("Server");
|
||||
//Object(cnofd["setServerUrl"])("http://localhost:8080/api/ofdrender/");
|
||||
|
||||
data: function data() {
|
||||
return {
|
||||
leftMenuWidth: 0,
|
||||
ofdBase64: null,
|
||||
pageIndex: 1,
|
||||
pageCount: 0,
|
||||
title: null,
|
||||
value: null,
|
||||
ofdDoc: null,
|
||||
screenWidth: document.body.clientWidth,
|
||||
ofdDiv: null,
|
||||
isFont: false
|
||||
};
|
||||
}
|
||||
|
||||
var file = this.getQueryVariable("file");
|
||||
if (file) this.loadOfdFile(file);
|
||||
|
||||
function getQueryVariable(variable) {
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
var pair = vars[i].split("=");
|
||||
|
||||
if (pair[0] == variable) {
|
||||
return pair[1];
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function loadOfdFile(ofdFile) {
|
||||
var that = this;
|
||||
JSZipUtils.getBinaryContent(ofdFile,
|
||||
function(err, data) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
} else {
|
||||
var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(data)));
|
||||
that.ofdBase64 = base64String;
|
||||
}
|
||||
});
|
||||
ofdFile = ofdFile = decodeURIComponent(ofdFile);
|
||||
this.getOfdDocument(ofdFile, this.screenWidth);
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function openFile() {
|
||||
this.isFont = false;
|
||||
this.file = null;
|
||||
$("#file")[0].click();
|
||||
}
|
||||
|
||||
function fileChanged() {
|
||||
this.file = $("#file")[0].files[0];
|
||||
if (this.file == null)
|
||||
return;
|
||||
|
||||
var ext = this.file.name.replace(/.+\./, "");
|
||||
|
||||
if (["ofd"].indexOf(ext) === -1) {
|
||||
this.$alert("error", "仅支持ofd文件类型", {
|
||||
confirmButtonText: "确定",
|
||||
callback: function callback(action) {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "action: ".concat(action)
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.file.size > 10 * 1024 * 1024) {
|
||||
this.$alert("error", "文件大小超过10MB", {
|
||||
confirmButtonText: "确定",
|
||||
callback: function callback(action) {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "action: ".concat(action)
|
||||
});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Object(cnofd["setScaleValue"])(1.0);
|
||||
var selectZoom = document.getElementById("zoomValue");
|
||||
if (selectZoom)
|
||||
selectZoom.value = "1.0";
|
||||
|
||||
var that = this;
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(this.file);
|
||||
|
||||
reader.onload = function(e) {
|
||||
that.ofdBase64 = e.target.result.split(",")[1];
|
||||
};
|
||||
|
||||
this.getOfdDocument(this.file, this.screenWidth);
|
||||
}
|
||||
|
||||
function getOfdDocument(file, screenWidth) {
|
||||
var that = this;
|
||||
|
||||
$("#loading").show();
|
||||
|
||||
var contentDiv = document.getElementById("content");
|
||||
contentDiv.innerHTML = "";
|
||||
Object(cnofd["ofdParse"])({
|
||||
ofd: file,
|
||||
success: function success(res) {
|
||||
that.ofdDoc = res;
|
||||
that.pageIndex = 1;
|
||||
that.pageCount = res.pageCount;
|
||||
var divs = Object(cnofd["ofdRender"])(res, screenWidth);
|
||||
that.displayOfdDiv(divs);
|
||||
$("#loading").hide();
|
||||
},
|
||||
fail: function fail(error) {
|
||||
$("#loading").hide();
|
||||
|
||||
that.$alert("OFD打开失败", error, {
|
||||
confirmButtonText: "确定",
|
||||
callback: function callback(action) {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "action: ".concat(action)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function displayOfdDiv(divs) {
|
||||
var contentDiv = document.getElementById("content");
|
||||
contentDiv.innerHTML = "";
|
||||
|
||||
var _iterator3 = _createForOfIteratorHelper(divs),
|
||||
_step3;
|
||||
|
||||
try {
|
||||
for (_iterator3.s(); ! (_step3 = _iterator3.n()).done;) {
|
||||
var div = _step3.value;
|
||||
contentDiv.appendChild(div);
|
||||
}
|
||||
} catch(err) {
|
||||
_iterator3.e(err);
|
||||
} finally {
|
||||
_iterator3.f();
|
||||
}
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
var selectZoom = document.getElementById("zoomValue");
|
||||
if (selectZoom.selectedIndex > 0) {
|
||||
selectZoom.selectedIndex = selectZoom.selectedIndex - 1;
|
||||
|
||||
Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
|
||||
var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
|
||||
if (divs) {
|
||||
this.displayOfdDiv(divs);
|
||||
} else {
|
||||
this.getOfdDocument(this.file, this.screenWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
var selectZoom = document.getElementById("zoomValue");
|
||||
if (selectZoom.selectedIndex < selectZoom.length-1) {
|
||||
selectZoom.selectedIndex = selectZoom.selectedIndex + 1;
|
||||
|
||||
Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
|
||||
var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
|
||||
if (divs) {
|
||||
this.displayOfdDiv(divs);
|
||||
} else {
|
||||
this.getOfdDocument(this.file, this.screenWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function zoomChange() {
|
||||
var selectZoom = document.getElementById("zoomValue");
|
||||
Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
|
||||
var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
|
||||
if (divs) {
|
||||
this.displayOfdDiv(divs);
|
||||
} else {
|
||||
this.getOfdDocument(this.file, this.screenWidth);
|
||||
}
|
||||
}
|
||||
|
||||
function scrool() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
|
||||
var contentDiv1 = contentDiv.firstElementChild;
|
||||
|
||||
var scrolled = (contentDiv1 === null || contentDiv1 === void 0 ? void 0 : contentDiv1.getBoundingClientRect() === null || contentDiv1.getBoundingClientRect() === void 0 ? void 0 : contentDiv1.getBoundingClientRect().top) - 60;
|
||||
var top = 0;
|
||||
var index = 0;
|
||||
|
||||
for (var i = 0; i < contentDiv.childElementCount; i++) {
|
||||
var contentDiv2 = contentDiv.children.item(i);
|
||||
|
||||
top += Math.abs(contentDiv2 === null || contentDiv2 === void 0 ? void 0 : contentDiv2.style.height.replace("px", "")) + Math.abs(contentDiv2 === null || contentDiv2 === void 0 ? void 0 : contentDiv2.style.marginBottom.replace("px", ""));
|
||||
|
||||
if (Math.abs(scrolled) < top) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.pageIndex = index + 1;
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function setPageInfo() {
|
||||
if (! (this.pageCount == null) && this.pageCount > 0) {
|
||||
$("#pageInfo")[0].innerText = this.pageIndex + "/" + this.pageCount;
|
||||
}
|
||||
}
|
||||
|
||||
function prePage() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
var ele = contentDiv.children.item(this.pageIndex - 2);
|
||||
ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
|
||||
ele ? this.pageIndex = this.pageIndex - 1 : "";
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function firstPage() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
var ele = contentDiv.firstElementChild;
|
||||
ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
|
||||
ele ? this.pageIndex = 1 : "";
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
var ele = contentDiv.children.item(this.pageIndex);
|
||||
ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
|
||||
ele ? ++this.pageIndex: "";
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function lastPage() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
var ele = contentDiv.children.item(contentDiv.childElementCount - 1);
|
||||
ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
|
||||
ele ? this.pageIndex = contentDiv.childElementCount : "";
|
||||
|
||||
setPageInfo();
|
||||
}
|
||||
|
||||
function print() {
|
||||
var contentDiv = document.getElementById("content");
|
||||
var contentDivChilds = contentDiv.children;
|
||||
var list = [];
|
||||
|
||||
for (var i = 0; i < contentDivChilds.length; i++) {
|
||||
var ele = contentDivChilds.item(i);
|
||||
list.push(ele.cloneNode(true));
|
||||
this.percentage = i / contentDivChilds.length;
|
||||
}
|
||||
|
||||
if (list.length > 0) {
|
||||
if (!isIE()) {
|
||||
var mywindow = window.open("打印窗口", "_blank");
|
||||
var documentBody = mywindow.document.body;
|
||||
var _iterator2 = _createForOfIteratorHelper(list),
|
||||
_step2;
|
||||
|
||||
try {
|
||||
for (_iterator2.s(); ! (_step2 = _iterator2.n()).done;) {
|
||||
var canvas = _step2.value;
|
||||
canvas.style.margin = "";
|
||||
canvas.style.boxShadow = "";
|
||||
documentBody.appendChild(canvas);
|
||||
}
|
||||
} catch(err) {
|
||||
_iterator2.e(err);
|
||||
} finally {
|
||||
_iterator2.f();
|
||||
}
|
||||
|
||||
mywindow.focus();
|
||||
mywindow.print();
|
||||
mywindow.close();
|
||||
|
||||
} else {
|
||||
var printhtml = "";
|
||||
for (var i=0; i < list.length; i++) {
|
||||
var canvas = list[i];
|
||||
canvas.style.margin = "";
|
||||
canvas.style.boxShadow = "";
|
||||
printhtml = printhtml + canvas.outerHTML;
|
||||
}
|
||||
printIE(printhtml);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function printIE(printhtml) {
|
||||
var iframe = document.createElement("iframe");
|
||||
iframe.id = "printf";
|
||||
iframe.style.width = "0";
|
||||
iframe.style.display = "none"
|
||||
iframe.style.height = "0";
|
||||
iframe.style.border = "none";
|
||||
|
||||
document.body.appendChild(iframe);
|
||||
|
||||
setTimeout(function () {
|
||||
iframe.contentDocument.write(" <script type='text/javascript'> window.onload = function() { document.execCommand('print'); } </script> " + printhtml);
|
||||
iframe.contentDocument.close();
|
||||
},
|
||||
100)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,104 @@
|
|||
!function(e) {
|
||||
"object" == typeof exports ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : "undefined" != typeof window ? window.JSZipUtils = e() : "undefined" != typeof global ? global.JSZipUtils = e() : "undefined" != typeof self && (self.JSZipUtils = e())
|
||||
}(function() {
|
||||
return function o(i, f, u) {
|
||||
function s(n, e) {
|
||||
if (!f[n]) {
|
||||
if (!i[n]) {
|
||||
var t = "function" == typeof require && require;
|
||||
if (!e && t)
|
||||
return t(n, !0);
|
||||
if (a)
|
||||
return a(n, !0);
|
||||
throw new Error("Cannot find module '" + n + "'")
|
||||
}
|
||||
var r = f[n] = {
|
||||
exports: {}
|
||||
};
|
||||
i[n][0].call(r.exports, function(e) {
|
||||
var t = i[n][1][e];
|
||||
return s(t || e)
|
||||
}, r, r.exports, o, i, f, u)
|
||||
}
|
||||
return f[n].exports
|
||||
}
|
||||
for (var a = "function" == typeof require && require, e = 0; e < u.length; e++)
|
||||
s(u[e]);
|
||||
return s
|
||||
}({
|
||||
1: [function(e, t, n) {
|
||||
"use strict";
|
||||
var u = {};
|
||||
function r() {
|
||||
try {
|
||||
return new window.XMLHttpRequest
|
||||
} catch (e) {}
|
||||
}
|
||||
u._getBinaryFromXHR = function(e) {
|
||||
return e.response || e.responseText
|
||||
}
|
||||
;
|
||||
var s = "undefined" != typeof window && window.ActiveXObject ? function() {
|
||||
return r() || function() {
|
||||
try {
|
||||
return new window.ActiveXObject("Microsoft.XMLHTTP")
|
||||
} catch (e) {}
|
||||
}()
|
||||
}
|
||||
: r;
|
||||
u.getBinaryContent = function(t, n) {
|
||||
t = decodeURIComponent(t);
|
||||
var e, r, o, i;
|
||||
"function" == typeof (n = n || {}) ? (i = n,
|
||||
n = {}) : "function" == typeof n.callback && (i = n.callback),
|
||||
i || "undefined" == typeof Promise ? (r = function(e) {
|
||||
i(null, e)
|
||||
}
|
||||
,
|
||||
o = function(e) {
|
||||
i(e, null)
|
||||
}
|
||||
) : e = new Promise(function(e, t) {
|
||||
r = e,
|
||||
o = t
|
||||
}
|
||||
);
|
||||
try {
|
||||
var f = s();
|
||||
f.open("GET", t, !0),
|
||||
"responseType"in f && (f.responseType = "arraybuffer"),
|
||||
f.overrideMimeType && f.overrideMimeType("text/plain; charset=x-user-defined"),
|
||||
f.onreadystatechange = function(e) {
|
||||
if (4 === f.readyState)
|
||||
if (200 === f.status || 0 === f.status)
|
||||
try {
|
||||
r(u._getBinaryFromXHR(f))
|
||||
} catch (e) {
|
||||
o(new Error(e))
|
||||
}
|
||||
else
|
||||
o(new Error("Ajax error for " + t + " : " + this.status + " " + this.statusText))
|
||||
}
|
||||
,
|
||||
n.progress && (f.onprogress = function(e) {
|
||||
n.progress({
|
||||
path: t,
|
||||
originalEvent: e,
|
||||
percent: e.loaded / e.total * 100,
|
||||
loaded: e.loaded,
|
||||
total: e.total
|
||||
})
|
||||
}
|
||||
),
|
||||
f.send()
|
||||
} catch (e) {
|
||||
o(new Error(e), null)
|
||||
}
|
||||
return e
|
||||
}
|
||||
,
|
||||
t.exports = u
|
||||
}
|
||||
, {}]
|
||||
}, {}, [1])(1)
|
||||
});
|
||||
|
|
@ -12,7 +12,12 @@
|
|||
<iframe src="" width="100%" frameborder="0"></iframe>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file=${currentUrl}";
|
||||
var url = '${currentUrl}';
|
||||
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
|
||||
if (!url.startsWith(baseUrl)) {
|
||||
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(url);
|
||||
}
|
||||
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file="+ encodeURIComponent(url)+"";
|
||||
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight - 10;
|
||||
/**
|
||||
* 页面变化调整高度
|
||||
|
|
@ -28,4 +33,4 @@
|
|||
initWaterMark();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue