open-source/file-online-preview
1
0
Fork 0
mirror of https://gitee.com/kekingcn/file-online-preview.git synced 2026-04-09 01:37:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

新增 页码定位 美化前端 其他功能调整等

Browse Source
This commit is contained in:
高雄
2026-01-19 17:46:32 +08:00
parent 904af89190
commit 7dc0469b30
48 changed files with 10922 additions and 1241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
server/src/main/resources/web/bpmn.ftl
View File

@@ -41,9 +41,10 @@
const viewer = new BpmnJS({
container: '#diagram'
});
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
async function showDiagram(diagramXML) {

55
server/src/main/resources/web/code.ftl
View File

@@ -3,26 +3,22 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>代码预览</title>
<title>${file.name}代码预览</title>
<#include "*/commonHeader.ftl">
<script src="js/jquery-3.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="highlight/default.min.css">
<link rel="stylesheet" href="highlight/highlight.css">
<script src="highlight/highlight.min.js" type="text/javascript"></script>
<script src="js/fenye.js" type="text/javascript"></script>
<#if "${file.suffix?lower_case}" == "js" >
<script src="js/jsformat.js" type="text/javascript"></script>
</#if>
<script src="js/base64.min.js" type="text/javascript"></script>
<script>hljs.highlightAll()</script>
<style>
div.code {
white-space: pre;
}
</style>
</head>
<body>
<input hidden id="textData" value="${textData}"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
@@ -32,39 +28,30 @@
</a>
</h4>
</div>
<div class="panel-body">
<div id="code" class='code'></div>
</div>
<div id="divPagenation" class="black" >
</div>
<div id="divContent" class="panel-body">
</div>
<div id="divPagenationx" class="black" >
</div>
</div>
</div>
<script>
/**
<script type="text/javascript">
var base64data = $("#textData").val()
var s = Base64.decode(base64data);
var kkkeyword = '${highlightall}';
var Length= 20000;
var page= '${page}';
<#if "${file.suffix?lower_case}" == "js" > var txt = "js";<#else>var txt = "code";</#if>
DHTMLpagenation(s,kkkeyword,Length,page,txt);
/**
* 初始化
*/
window.onload = function () {
initWaterMark();
loadText();
}
/**
*加载普通文本
*/
function loadText() {
var base64data = $("#textData").val()
var textData = Base64.decode(base64data);
var textPreData = "<pre><code>" + textData + "</code></pre>";
$("#code").append(textPreData);
document.querySelectorAll('div.code').forEach(block => {
// then highlight each
hljs.highlightBlock(block);
});
}
</script>
</body>
</html>

5
server/src/main/resources/web/dcm.ftl
View File

@@ -54,9 +54,10 @@
<script src="dcm/index.umd.js"></script>
<script>
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
"use strict";

5
server/src/main/resources/web/drawio.ftl
View File

@@ -16,9 +16,10 @@
<#assign finalUrl="${baseUrl}${currentUrl}">
</#if>
<script>
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
document.getElementsByTagName('iframe')[0].src = "${baseUrl}drawio/index.html?lightbox=1&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&edit=_blank&lang=zh#U"+ encodeURIComponent(url)+"";

7
server/src/main/resources/web/eml.ftl
View File

@@ -19,10 +19,11 @@
<iframe src="" width="100%" frameborder="0"></iframe>
</body>
<script type="text/javascript">
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
document.getElementsByTagName('iframe')[0].src = "${baseUrl}eml/index.html?file="+encodeURIComponent(url);
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight - 10;

7
server/src/main/resources/web/epub.ftl
View File

@@ -25,10 +25,11 @@
<div id="next" class="arrow">›</div>
</body>
<script type="text/javascript">
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
function blobToArrayBuffer(blob) {

724
server/src/main/resources/web/main/index.ftl
View File

File diff suppressed because it is too large Load Diff

10
server/src/main/resources/web/ofd.ftl
View File

@@ -18,14 +18,16 @@
</body>
<script type="text/javascript">
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
if(IsPhone()){
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file=" + encodeURIComponent(url)+"&scale=width";
if(IsPhone()){
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file=" + encodeURIComponent(url)+"&scale=width"+"&page=${page}";
}else{
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file="+ encodeURIComponent(url)+"";
document.getElementsByTagName('iframe')[0].src = "${baseUrl}ofd/index.html?file="+ encodeURIComponent(url)+"&page=${page}";
}
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight - 10;
/**

351
server/src/main/resources/web/officePicture.ftl
View File

@@ -2,64 +2,317 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PDF图片预览</title>
<title>${file.name}图片预览</title>
<#include "*/commonHeader.ftl">
<script src="js/lazyload.js"></script>
<style>
body {
background-color: #404040;
}
.container {
width: 100%;
height: 100%;
}
.img-area {
text-align: center;
}
.my-photo {
max-width: 98%;
margin:0 auto;
border-radius:3px;
box-shadow:rgba(0,0,0,0.15) 0 0 8px;
background:#FBFBFB;
border:1px solid #ddd;
margin:1px auto;
padding:5px;
}
</style>
<link rel="stylesheet" href="css/officePicture.css"/>
</head>
<body>
<div class="container">
<#list imgUrls as img>
<div class="img-area">
<img class="my-photo" alt="loading" data-src="${img}" src="images/loading.gif">
<div class="img-area" id="imgArea${img_index+1}">
<div class="image-container">
<img class="my-photo" id="page${img_index+1}" src="images/loading.gif" guoyu-src="${img}">
<div class="button-container">
<button class="sszImg" >${img_index+1}/${imgUrls?size}页</button>
<button class="nszImg" onclick="rotateImg('page${img_index+1}', false)">逆时针</button>
<button class="sszImg" onclick="rotateImg('page${img_index+1}', true)">顺时针</button>
<button onclick="recoveryImg('page${img_index+1}')">恢复</button>
</div>
</div>
</div>
</#list>
</div>
<#if "false" == switchDisabled>
<img src="images/pdf.svg" width="48" height="48" style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用PDF预览" title="使用PDF预览" onclick="changePreviewType('pdf')"/>
</#if>
<script>
window.onload = function () {
/*初始化水印*/
initWaterMark();
checkImgs();
};
window.onscroll = throttle(checkImgs);
function changePreviewType(previewType) {
var url = window.location.href;
if (url.indexOf("officePreviewType=image") !== -1) {
url = url.replace("officePreviewType=image", "officePreviewType="+previewType);
} else {
url = url + "&officePreviewType="+previewType;
}
if ('allImages' === previewType) {
window.open(url)
} else {
window.location.href = url;
}
}
</script>
<!-- 页码跳转输入框 -->
<div id="pageJumpBox" style="position: fixed; top: 20px; right: 120px; background: white; padding: 10px; border: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.2); display: none; z-index: 1000;">
<div style="margin-bottom: 5px; font-size: 14px;">跳转到第几页?</div>
<input type="number" id="jumpPageInput" style="width: 60px; padding: 5px; border: 1px solid #ccc;" min="1" max="${imgUrls?size}" value="1">
<button onclick="jumpToPage()" style="margin-left: 5px; padding: 5px 10px; background: #007bff; color: white; border: none; cursor: pointer;">跳转</button>
<button onclick="hidePageJumpBox()" style="margin-left: 5px; padding: 5px 10px; background: #6c757d; color: white; border: none; cursor: pointer;">关闭</button>
</div>
<script type="text/javascript">
// 获取页码参数，默认为1
var targetPage = ${page!1};
var totalPages = ${imgUrls?size};
// 如果页码超出范围，设为第一页
if (targetPage < 1 || targetPage > totalPages) {
targetPage = 1;
}
// 页面加载完成后跳转到指定页码
window.onload = function() {
// 延迟执行，确保DOM完全加载
setTimeout(function() {
// 滚动到指定页码
scrollToPage(targetPage);
// 显示当前页码指示器
showPageIndicator(targetPage);
}, 100);
// 初始化懒加载
initLazyLoad();
// 初始化水印
initWaterMark();
// 为每个图片区域添加点击事件，显示当前页码
var imgAreas = document.querySelectorAll('.img-area');
imgAreas.forEach(function(area, index) {
area.onclick = function() {
showPageIndicator(index + 1);
};
});
// 添加键盘事件支持
document.addEventListener('keydown', function(e) {
var currentPage = getCurrentPage();
// 右箭头或空格键翻到下一页
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
e.preventDefault();
var nextPage = Math.min(currentPage + 1, totalPages);
scrollToPage(nextPage);
}
// 左箭头翻到上一页
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
e.preventDefault();
var prevPage = Math.max(currentPage - 1, 1);
scrollToPage(prevPage);
}
// J键打开跳转框
else if (e.key === 'j' || e.key === 'J') {
e.preventDefault();
showPageJumpBox();
}
// ESC键关闭跳转框
else if (e.key === 'Escape') {
hidePageJumpBox();
}
});
};
// 滚动到指定页码
function scrollToPage(pageNum) {
var targetElement = document.getElementById('imgArea' + pageNum);
if (targetElement) {
// 确保图片已加载
var targetImg = document.getElementById('page' + pageNum);
if (targetImg && targetImg.src.includes('loading.gif')) {
targetImg.src = targetImg.getAttribute('guoyu-src');
}
// 滚动到目标位置
targetElement.scrollIntoView({behavior: 'smooth', block: 'start'});
// 显示页码指示器
showPageIndicator(pageNum);
}
}
// 显示页码指示器
function showPageIndicator(pageNum) {
var indicator = document.getElementById('pageIndicator');
var currentPageSpan = document.getElementById('currentPageNum');
currentPageSpan.textContent = pageNum;
indicator.style.display = 'block';
// 3秒后自动隐藏
clearTimeout(window.indicatorTimeout);
window.indicatorTimeout = setTimeout(function() {
indicator.style.display = 'none';
}, 3000);
}
// 获取当前可见的页码
function getCurrentPage() {
var imgAreas = document.querySelectorAll('.img-area');
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
for (var i = 0; i < imgAreas.length; i++) {
var rect = imgAreas[i].getBoundingClientRect();
// 如果元素顶部在视口中且高度超过一定阈值
if (rect.top >= 0 && rect.top <= viewportHeight * 0.3) {
return i + 1;
}
}
return 1;
}
// 显示页码跳转框
function showPageJumpBox() {
var jumpBox = document.getElementById('pageJumpBox');
var currentPage = getCurrentPage();
document.getElementById('jumpPageInput').value = currentPage;
jumpBox.style.display = 'block';
document.getElementById('jumpPageInput').focus();
document.getElementById('jumpPageInput').select();
}
// 隐藏页码跳转框
function hidePageJumpBox() {
document.getElementById('pageJumpBox').style.display = 'none';
}
// 跳转到输入的页码
function jumpToPage() {
var pageInput = document.getElementById('jumpPageInput');
var pageNum = parseInt(pageInput.value);
if (isNaN(pageNum) || pageNum < 1 || pageNum > totalPages) {
alert('请输入有效的页码 (1-' + totalPages + ')');
return;
}
scrollToPage(pageNum);
hidePageJumpBox();
}
// 初始化懒加载
function initLazyLoad() {
var aImg = document.querySelectorAll('.my-photo');
var len = aImg.length;
var n = 0;
function lazyLoad() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
for (var i = n; i < len; i++) {
var rect = aImg[i].getBoundingClientRect();
var top = rect.top;
// 如果图片进入可视区域或附近区域
if (top < seeHeight + scrollTop + 500) {
var src = aImg[i].getAttribute('guoyu-src');
if (src && aImg[i].src.includes('loading.gif')) {
aImg[i].src = src;
}
n = i + 1;
}
}
}
// 初始加载当前页码及附近的图片
setTimeout(function() {
// 加载当前页码图片
var currentImg = document.getElementById('page' + targetPage);
if (currentImg && currentImg.src.includes('loading.gif')) {
currentImg.src = currentImg.getAttribute('guoyu-src');
}
// 加载前后几页图片
for (var i = Math.max(1, targetPage - 2); i <= Math.min(totalPages, targetPage + 2); i++) {
if (i === targetPage) continue;
var img = document.getElementById('page' + i);
if (img && img.src.includes('loading.gif')) {
img.src = img.getAttribute('guoyu-src');
}
}
}, 300);
window.onscroll = function() {
lazyLoad();
initWaterMark();
};
// 初始加载一次
lazyLoad();
}
var aImg = document.querySelectorAll('.my-photo');
var len = aImg.length;
var n = 0;
window.onscroll = function() {
var seeHeight = document.documentElement.clientHeight-30;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
for (var i = n; i < len; i++) {
var rect = aImg[i].getBoundingClientRect();
var top = rect.top;
if (top < seeHeight + scrollTop) {
aImg[i].src = aImg[i].getAttribute('guoyu-src');
n = i + 1;
}
}
initWaterMark();
};
function changePreviewType(previewType) {
var url = window.location.href;
if (url.indexOf("officePreviewType=image") !== -1) {
url = url.replace("officePreviewType=image", "officePreviewType="+previewType);
} else {
url = url + "&officePreviewType="+previewType;
}
window.location.href = url;
}
function rotateImg(imgId, isRotate) {
var img = document.querySelector("#" + imgId);
if (img.classList.contains("imgT90")) {
img.classList.remove("imgT90");
if (isRotate) {
img.classList.add("imgT180");
}
} else if (img.classList.contains("imgT-90")) {
img.classList.remove("imgT-90");
if (!isRotate) {
img.classList.add("imgT-180");
}
} else if (img.classList.contains("imgT180")) {
img.classList.remove("imgT180");
if (isRotate) {
img.classList.add("imgT270");
} else {
img.classList.add("imgT90");
}
} else if (img.classList.contains("imgT-180")) {
img.classList.remove("imgT-180");
if (isRotate) {
img.classList.add("imgT-90");
} else {
img.classList.add("imgT-270");
}
} else if (img.classList.contains("imgT270")) {
img.classList.remove("imgT270");
if (!isRotate) {
img.classList.add("imgT180");
}
} else if (img.classList.contains("imgT-270")) {
img.classList.remove("imgT-270");
if (isRotate) {
img.classList.add("imgT-180");
}
} else {
if (isRotate) {
img.classList.add("imgT90");
} else {
img.classList.add("imgT-90");
}
}
}
function recoveryImg(imgId) {
document.querySelector("#" + imgId).classList.remove("imgT90", "imgT180", "imgT270", "imgT-90", "imgT-180", "imgT-270");
}
// 滚动监听更新页码指示器
window.addEventListener('scroll', function() {
var currentPage = getCurrentPage();
showPageIndicator(currentPage);
});
</script>
</body>
</html>
</html>

332
server/src/main/resources/web/officeweb.ftl
View File

@@ -22,7 +22,6 @@
* 初始化水印
*/
function initWaterMark() {
let watermarkTxt = '${watermarkTxt}';
if (watermarkTxt !== '') {
watermark.init({
@@ -44,6 +43,10 @@
}
}
// 添加加载状态管理
let isLoading = false;
let loadingTask = null;
</script>
<style>
* {
@@ -54,13 +57,93 @@
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 9999;
transition: opacity 0.3s ease;
}
#loading-progress {
width: 300px;
height: 20px;
background: #f0f0f0;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
}
#loading-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
transition: width 0.3s ease;
border-radius: 10px;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #4CAF50;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
margin-top: 20px;
font-size: 16px;
color: #666;
}
.error-message {
display: none;
background: #ffebee;
border: 1px solid #ffcdd2;
border-radius: 4px;
padding: 20px;
margin: 20px;
text-align: center;
}
</style>
<body>
<!-- 添加加载遮罩层 -->
<div id="loading-overlay">
<div class="spinner"></div>
<div class="loading-text">正在加载Excel文件...</div>
<div id="loading-progress">
<div id="loading-bar"></div>
</div>
</div>
<!-- 错误提示 -->
<div id="error-message" class="error-message">
<h3>加载失败</h3>
<p id="error-detail"></p>
<button onclick="retryLoad()" style="margin-top: 10px; padding: 8px 16px;">重试</button>
</div>
<div id="lucky-mask-demo" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display: none;">加载中</div>
<p style="text-align:center;">
<div id="button-area">
<div id="button-area" style="display: none;">
<label><button onclick="tiaozhuan()">跳转HTML预览</button></label>
<button id="confirm-button" onclick="print()">打印</button>
</div>
@@ -74,59 +157,218 @@
test = test+'&officePreviewType=html';
window.location.href=test;
}
var url = '${finalUrl}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
let mask = document.getElementById("lucky-mask-demo");
function loadText() {
initWaterMark(); // 是否显示水印
var value = url;
var name = '${file.name}';
if(value==""){
return;
let loadingOverlay = document.getElementById("loading-overlay");
let loadingBar = document.getElementById("loading-bar");
let errorMessage = document.getElementById("error-message");
// 更新加载进度
function updateProgress(percent) {
if (loadingBar) {
loadingBar.style.width = percent + '%';
}
// mask.style.display = "flex";
LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){
if(exportJson.sheets==null || exportJson.sheets.length==0){
alert("读取excel文件内容失败!");
}
// 显示错误信息
function showError(message) {
hideLoading();
errorMessage.style.display = 'block';
document.getElementById('error-detail').textContent = message;
}
// 隐藏加载动画
function hideLoading() {
if (loadingOverlay) {
loadingOverlay.style.opacity = '0';
setTimeout(() => {
loadingOverlay.style.display = 'none';
document.getElementById('button-area').style.display = 'block';
}, 300);
}
}
// 重试加载
function retryLoad() {
errorMessage.style.display = 'none';
loadingOverlay.style.display = 'flex';
loadingOverlay.style.opacity = '1';
loadTextAsync();
}
// 异步加载Excel文件
async function loadTextAsync() {
if (isLoading) return;
isLoading = true;
updateProgress(10);
try {
initWaterMark();
const value = url;
const name = '${file.name}';
if (!value) {
showError('文件URL为空');
return;
}
mask.style.display = "none";
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet', //luckysheet is the container id
lang: "zh",
showtoolbarConfig:{
image: true,
print: true, //关闭打印按钮 启用也不能用 等以后看情况而定
exportXlsx: true, //关闭导出按钮 启用也不能用 等以后看情况而定
},
allowCopy: true, // 是否允许拷贝
showtoolbar: true, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
// myFolderUrl: "/",//作用：左上角<返回按钮的链接
showsheetbar: true, // 是否显示底部sheet页按钮
showstatisticBar: true, // 是否显示底部计数栏
sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
allowEdit: true, // 是否允许前台编辑
enableAddRow: false, // 允许增加行
enableAddCol: false, // 允许增加列
userInfo: false, // 右上角的用户信息展示样式
showRowBar: true, // 是否显示行号区域
showColumnBar: false, // 是否显示列号区域
sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: true,//返回头部按钮
forceCalculation: false, //下面是导出插件 默认关闭
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator,
});
}, 1000);
updateProgress(30);
// 使用异步方式加载
await new Promise(resolve => setTimeout(resolve, 100)); // 给UI更新一点时间
// 或者使用现有的同步方法，但放在setTimeout中避免阻塞
await transformWithTimeout(value, name);
updateProgress(100);
// 延迟隐藏加载界面，让用户看到加载完成
setTimeout(() => {
hideLoading();
isLoading = false;
}, 500);
} catch (error) {
console.error('加载Excel失败:', error);
showError('加载失败: ' + error.message);
isLoading = false;
}
}
loadText();
// 打印时，获取luckysheet指定区域html内容，拼接至div，隐藏luckysheet容器并显示打印区域html
// 使用setTimeout将同步任务拆分
function transformWithTimeout(value, name) {
return new Promise((resolve, reject) => {
updateProgress(50);
// 将转换过程放在setTimeout中，避免阻塞主线程
setTimeout(() => {
try {
LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){
if(exportJson.sheets==null || exportJson.sheets.length==0){
reject(new Error("读取excel文件内容失败!"));
return;
}
updateProgress(80);
// 使用requestAnimationFrame来更新UI，避免阻塞
requestAnimationFrame(() => {
try {
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet',
lang: "zh",
showtoolbarConfig:{
image: true,
print: true,
exportXlsx: true,
},
allowCopy: true,
showtoolbar: true,
showinfobar: false,
showsheetbar: true,
showstatisticBar: true,
sheetBottomConfig: true,
allowEdit: true,
enableAddRow: false,
enableAddCol: false,
userInfo: false,
showRowBar: true,
showColumnBar: false,
sheetFormulaBar: false,
enableAddBackTop: true,
forceCalculation: false,
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator,
// 添加加载完成的回调
hook: {
workbookCreateAfter: function() {
resolve();
}
}
});
updateProgress(90);
} catch (err) {
reject(err);
}
});
}, 100);
} catch (error) {
reject(error);
}
}, 100);
});
}
// 初始化Luckysheet
function initializeLuckysheet(exportJson) {
if (!exportJson.sheets || exportJson.sheets.length === 0) {
throw new Error("读取excel文件内容失败!");
}
window.luckysheet.destroy();
window.luckysheet.create({
container: 'luckysheet',
lang: "zh",
showtoolbarConfig:{
image: true,
print: true,
exportXlsx: true,
},
allowCopy: true,
showtoolbar: true,
showinfobar: false,
showsheetbar: true,
showstatisticBar: true,
sheetBottomConfig: true,
allowEdit: true,
enableAddRow: false,
enableAddCol: false,
userInfo: false,
showRowBar: true,
showColumnBar: false,
sheetFormulaBar: false,
enableAddBackTop: true,
forceCalculation: false,
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator,
});
}
// 页面加载完成后开始异步加载
document.addEventListener('DOMContentLoaded', function() {
// 延迟一点时间开始加载，确保DOM完全加载
setTimeout(() => {
loadTextAsync();
}, 100);
});
// 添加取消加载的功能（按ESC键）
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && isLoading) {
// 可以在这里添加取消加载的逻辑
console.log('用户取消了加载');
}
});
// 打印时，获取luckysheet指定区域html内容
function to_print() {
const html = luckysheet.getRangeHtml();
document.querySelector('#print-html').innerHTML = html;

5
server/src/main/resources/web/pdf.ftl
View File

@@ -21,9 +21,10 @@
</body>
<script type="text/javascript">
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
document.getElementsByTagName('iframe')[0].src = "${baseUrl}pdfjs/web/viewer.html?file=" + encodeURIComponent(url) + "&disablepresentationmode=${pdfPresentationModeDisable}&disableopenfile=${pdfOpenFileDisable}&disableprint=${pdfPrintDisable}&disabledownload=${pdfDownloadDisable}&disablebookmark=${pdfBookmarkDisable}&disableediting=${pdfDisableEditing}";

24
server/src/main/resources/web/picture.ftl
View File

@@ -19,25 +19,25 @@
<ul id="image">
<#list imgUrls as img>
<#if img?contains("http://") || img?contains("https://")>
<#assign img="${img}">
<#else>
<#assign img="${baseUrl}${img}">
</#if>
<li><img id="${img}" url="${img}" src="${img}" style="display: none"></li>
<#if img?contains("http://") || img?contains("https://")|| img?contains("ftp://")|| img?contains("file://")>
<#assign finalUrl="${img}">
<#else>
<#assign finalUrl="${baseUrl}${img}">
</#if>
<li><div src="${finalUrl}" style="display: none"></li>
</#list>
</ul>
<script>
var viewer = new Viewer(document.getElementById('image'), {
document.addEventListener('DOMContentLoaded', function () {
var viewer = new Viewer(document.getElementById('image'), {
url: 'src',
navbar: false,
button: false,
backdrop: false,
loop : true
});
document.getElementById("${currentUrl}").click();
loop : true,
});
viewer.view(0); // 0 是图片的索引，如果你想点击第一张图片，索引为 0
});
/*初始化水印*/
window.onload = function() {
initWaterMark();

423
server/src/main/resources/web/svg.ftl
View File

@@ -1,14 +1,103 @@
<!DOCTYPE HTML>
<html>
<head>
<title>${file.name}文件预览</title>
<title><#if file.name??>${file.name}<#else>文件预览</#if></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<#include "*/commonHeader.ftl">
<script src="js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="js/svg-pan-zoom.js"></script>
<script src="js/base64.min.js"></script>
<#if currentUrl?contains("http://") || currentUrl?contains("https://") || currentUrl?contains("ftp://")>
<style>
#container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
background: #f5f5f5;
}
#svg-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
#svg-container svg {
display: block;
max-width: 100%;
max-height: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.controls {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.control-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: #007bff;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.control-btn:hover {
background: #0056b3;
transform: scale(1.1);
}
.control-btn:active {
transform: scale(0.95);
}
.control-btn.reset {
background: #6c757d;
}
.control-btn.reset:hover {
background: #545b62;
}
.zoom-display {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #666;
}
</style>
<#if currentUrl?contains("http://") || currentUrl?contains("https://") || currentUrl?contains("file://")|| currentUrl?contains("ftp://")>
<#assign finalUrl="${currentUrl}">
<#else>
<#assign finalUrl="${baseUrl}${currentUrl}">
@@ -16,38 +105,320 @@
</head>
<body>
<div id="container">
<div id="svg-container"></div>
<div class="zoom-display">缩放: 100%</div>
<div class="loading">正在加载SVG...</div>
<div class="controls">
<button class="control-btn" onclick="zoomIn()" title="放大">+</button>
<button class="control-btn" onclick="zoomOut()" title="缩小">-</button>
<button class="control-btn" onclick="rotateLeft()" title="向左旋转">↶</button>
<button class="control-btn" onclick="rotateRight()" title="向右旋转">↷</button>
<button class="control-btn reset" onclick="resetView()" title="重置视图">⟳</button>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
// 初始化变量
let svgElement = null;
let svgContainer = document.getElementById('svg-container');
let zoomLevel = 1;
let rotationAngle = 0;
let minZoom = 0.1;
let maxZoom = 10;
let zoomStep = 0.2;
let isDragging = false;
let startX, startY, startLeft, startTop;
let panStartX, panStartY;
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
function createNewEmbed(src){
var lastEventListener = null;
var gaodu1 =$(document).height();
var gaodu=gaodu1-5;
var embed = document.createElement('embed');
embed.setAttribute('style', 'width: 99%; height: '+gaodu+'px; border:1px solid black;');
embed.setAttribute('type', 'image/svg+xml');
embed.setAttribute('src', src);
$('#container').html(embed);
lastEventListener = function(){
svgPanZoom(embed, {
zoomEnabled: true,
controlIconsEnabled: true
});
}
embed.addEventListener('load', lastEventListener)
return embed;
// 加载并显示SVG
function loadSVG() {
if (!url) {
showError('URL参数缺失');
return;
}
createNewEmbed(url);
/*初始化水印*/
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.text();
})
.then(svgText => {
document.querySelector('.loading').style.display = 'none';
svgContainer.innerHTML = svgText;
svgElement = svgContainer.querySelector('svg');
if (svgElement) {
// 设置初始属性
svgElement.style.transformOrigin = 'center center';
svgElement.style.width = '100%';
svgElement.style.height = '100%';
// 添加拖拽功能
setupDragAndDrop();
// 添加鼠标滚轮缩放
setupWheelZoom();
// 添加键盘快捷键
setupKeyboardShortcuts();
// 添加触摸事件支持
setupTouchEvents();
// 初始更新显示
updateDisplay();
} else {
showError('SVG解析失败');
}
})
.catch(error => {
console.error('加载SVG失败:', error);
showError('加载SVG文件失败: ' + error.message);
});
}
// 显示错误信息
function showError(message) {
document.querySelector('.loading').style.display = 'none';
svgContainer.innerHTML = '<div style="color: red; text-align: center; padding: 50px; font-size: 16px;">' + message + '</div>';
}
// 设置拖拽功能
function setupDragAndDrop() {
svgContainer.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
}
// 设置触摸事件
function setupTouchEvents() {
svgContainer.addEventListener('touchstart', handleTouchStart, { passive: false });
svgContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
svgContainer.addEventListener('touchend', handleTouchEnd);
}
// 处理触摸开始
function handleTouchStart(e) {
if (e.touches.length === 1) {
isDragging = true;
panStartX = e.touches[0].clientX;
panStartY = e.touches[0].clientY;
startLeft = parseInt(svgContainer.style.left) || 0;
startTop = parseInt(svgContainer.style.top) || 0;
e.preventDefault();
} else if (e.touches.length === 2) {
// 双指缩放处理
e.preventDefault();
}
}
// 处理触摸移动
function handleTouchMove(e) {
if (!isDragging || e.touches.length !== 1) return;
const dx = e.touches[0].clientX - panStartX;
const dy = e.touches[0].clientY - panStartY;
svgContainer.style.left = (startLeft + dx) + 'px';
svgContainer.style.top = (startTop + dy) + 'px';
e.preventDefault();
}
// 处理触摸结束
function handleTouchEnd(e) {
isDragging = false;
}
// 鼠标拖拽开始
function startDrag(e) {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
startLeft = parseInt(svgContainer.style.left) || 0;
startTop = parseInt(svgContainer.style.top) || 0;
svgContainer.style.cursor = 'grabbing';
}
// 拖拽中
function drag(e) {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
svgContainer.style.left = (startLeft + dx) + 'px';
svgContainer.style.top = (startTop + dy) + 'px';
}
// 停止拖拽
function stopDrag() {
isDragging = false;
svgContainer.style.cursor = 'grab';
}
// 设置鼠标滚轮缩放
function setupWheelZoom() {
svgContainer.addEventListener('wheel', function(e) {
e.preventDefault();
const rect = svgContainer.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const delta = e.deltaY > 0 ? -zoomStep : zoomStep;
const newZoom = Math.min(maxZoom, Math.max(minZoom, zoomLevel + delta));
// 计算缩放中心点相对于容器的位置
const containerX = mouseX - rect.width / 2;
const containerY = mouseY - rect.height / 2;
// 更新缩放级别
const zoomChange = newZoom / zoomLevel;
zoomLevel = newZoom;
// 调整位置以保持鼠标点位置不变
const currentLeft = parseInt(svgContainer.style.left) || 0;
const currentTop = parseInt(svgContainer.style.top) || 0;
svgContainer.style.left = (currentLeft - containerX * (zoomChange - 1)) + 'px';
svgContainer.style.top = (currentTop - containerY * (zoomChange - 1)) + 'px';
updateTransform();
updateDisplay();
});
}
// 设置键盘快捷键
function setupKeyboardShortcuts() {
document.addEventListener('keydown', function(e) {
// 避免在输入框中触发快捷键
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
switch(e.key) {
case '+':
case '=':
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
zoomIn();
}
break;
case '-':
case '_':
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
zoomOut();
}
break;
case '0':
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
resetView();
}
break;
case '[':
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
rotateLeft();
}
break;
case ']':
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
rotateRight();
}
break;
}
});
}
// 放大
function zoomIn() {
zoomLevel = Math.min(maxZoom, zoomLevel + zoomStep);
updateTransform();
updateDisplay();
}
// 缩小
function zoomOut() {
zoomLevel = Math.max(minZoom, zoomLevel - zoomStep);
updateTransform();
updateDisplay();
}
// 向左旋转
function rotateLeft() {
rotationAngle -= 90;
updateTransform();
}
// 向右旋转
function rotateRight() {
rotationAngle += 90;
updateTransform();
}
// 重置视图
function resetView() {
zoomLevel = 1;
rotationAngle = 0;
svgContainer.style.left = '50%';
svgContainer.style.top = '50%';
updateTransform();
updateDisplay();
}
// 更新变换
function updateTransform() {
let transform = 'translate(-50%, -50%)';
// 先应用缩放
if (zoomLevel !== 1) {
transform += ' scale(' + zoomLevel + ')';
}
// 再应用旋转
if (rotationAngle !== 0) {
transform += ' rotate(' + rotationAngle + 'deg)';
}
svgContainer.style.transform = transform;
}
// 更新显示
function updateDisplay() {
var zoomDisplay = document.querySelector('.zoom-display');
if (zoomDisplay) {
var displayText = '缩放: ' + Math.round(zoomLevel * 100) + '%';
if (rotationAngle !== 0) {
// 将角度规范到0-360度
var normalizedAngle = ((rotationAngle % 360) + 360) % 360;
displayText += ' | 旋转: ' + normalizedAngle + '°';
}
zoomDisplay.textContent = displayText;
}
}
// 页面加载完成后初始化
window.onload = function () {
initWaterMark();
// 设置初始光标
svgContainer.style.cursor = 'grab';
// 加载SVG
loadSVG();
// 如果有水印初始化函数，调用它
if (typeof initWaterMark === 'function') {
initWaterMark();
}
}
</script>
</body>
</html>
</html>

114
server/src/main/resources/web/tiff.ftl
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<title>Tiff 图片预览</title>
<#include "*/commonHeader.ftl">
<link rel="stylesheet" href="css/viewer.min.css">
<link rel="stylesheet" href="css/officePicture.css"/>
<script src="js/UTIF.js"></script>
<script src="js/base64.min.js" type="text/javascript"></script>
<#if currentUrl?contains("http://") || currentUrl?contains("https://") || currentUrl?contains("file://")|| currentUrl?contains("ftp://")>
@@ -13,13 +13,6 @@
<#assign finalUrl="${baseUrl}${currentUrl}">
</#if>
</head>
<style type="text/css">
body{ text-align:center}
img{max-width: 100%;
margin:0 auto;
border: 2px solid #ddd;
}
</style>
<body>
<#if "false" == pdfDownloadDisable>
<!--endprint-->
@@ -38,8 +31,9 @@
return reg.test(this);
}
var url = '${finalUrl}';
var baseUrl = '${baseUrl}'.endsWithh('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWithh(baseUrl)) {
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
var myp = document.getElementById('tiff');
@@ -59,11 +53,17 @@
} catch(e){
if (e.message.indexOf("CanvasRenderingContext2D"))
{
var imgObjj = new Image();
imgObjj.src = url;
myp.appendChild(imgObjj);
console.log("错误:" + e);
return;
var html = "";
html += "<div class=\"img-area\">";
html += "<div class=\"image-container\">";
html += '<img class="my-photo" id="page1" src="'+url+'">';
html += "<div class=\"button-container\">";
html += "<button onclick=\"rotateImg('page1', false)\">旋转</button>";
html += "</div>";
html += "</div>";
html += "</div>";
myp.innerHTML = html;
return;
}
console.log("错误:" + e);
var html = "";
@@ -109,24 +109,42 @@ html += " <p>有任何疑问，请加入kk开源社区知识星球咨询：<a
html += "</div>";
html += "</body>";
html += "</html>";
document.write(html);
document.close();
return;
document.write(html);
document.close();
return;
}
for (let i = 0; i < rgba.length; i++) {
imageData.data[i] = rgba[i];
}
ctx.putImageData(imageData, 0, 0);
const imgObj = document.createElement('img');
// imgObj.id = 'page${img_index+1}';
// imgObj.className = "my-photo";
imgObj.src = canvas.toDataURL('image/png');
if (++p < pages.length) {
imgObj.onload = loadOne;
}
myp.appendChild(imgObj);
console.log(p);
var html = "";
html += "<div class=\"img-area\">";
html += "<div class=\"image-container\">";
html += '<img class="my-photo" id="page'+p+'" src="'+canvas.toDataURL('image/png')+'">';
html += " <div class=\"button-container\">";
html += "<button class=\"nszImg\">"+p+"/"+pages.length+"页</button>";
html += "<button class=\"nszImg\" onclick=\"rotateImg('page"+p+"', false)\">逆时针</button>";
html += "<button class=\"sszImg\" onclick=\"rotateImg('page"+p+"', true)\">顺时针</button>";
html += "<button class=\"sszImg\" onclick=\"recoveryImg('page"+p+"', true)\">恢复</button>";
html += "</div>";
html += "</div>";
html += "</div>";
const child = document.createElement('div');
child.innerHTML = html;
myp.appendChild(child);
}
function imgLoaded(e) {
resp = e.target.response;
resp = e;
pages = UTIF.decode(resp);
p = 0;
loadOne();
@@ -134,8 +152,62 @@ html += "</html>";
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = imgLoaded;
xhr.onload = function() {
if (xhr.status === 200) {
imgLoaded(xhr.response);
} else {
console.log(`Error ${xhr.status}: ${xhr.statusText}`)
}
};
xhr.send();
function rotateImg(imgId, isRotate) {
var img = document.querySelector("#" + imgId);
if (img.classList.contains("imgT90")) {
img.classList.remove("imgT90");
if (isRotate) {
img.classList.add("imgT180");
}
} else if (img.classList.contains("imgT-90")) {
img.classList.remove("imgT-90");
if (!isRotate) {
img.classList.add("imgT-180");
}
} else if (img.classList.contains("imgT180")) {
img.classList.remove("imgT180");
if (isRotate) {
img.classList.add("imgT270");
} else {
img.classList.add("imgT90");
}
} else if (img.classList.contains("imgT-180")) {
img.classList.remove("imgT-180");
if (isRotate) {
img.classList.add("imgT-90");
} else {
img.classList.add("imgT-270");
}
} else if (img.classList.contains("imgT270")) {
img.classList.remove("imgT270");
if (!isRotate) {
img.classList.add("imgT180");
}
} else if (img.classList.contains("imgT-270")) {
img.classList.remove("imgT-270");
if (isRotate) {
img.classList.add("imgT-180");
}
} else {
if (isRotate) {
img.classList.add("imgT90");
} else {
img.classList.add("imgT-90");
}
}
}
function recoveryImg(imgId) {
document.querySelector("#" + imgId).classList.remove("imgT90", "imgT180", "imgT270", "imgT-90", "imgT-180", "imgT-270")
}
/*初始化水印*/
window.onload = function () {

366
server/src/main/resources/web/txt.ftl
View File

@@ -12,286 +12,89 @@
</head>
<body>
<input hidden id="textData" value="${textData}"/>
<#if "${file.suffix?html}" == "txt" || "${file.suffix?html}" == "log" || "${file.suffix?html}" == "TXT" || "${file.suffix?html}" == "LOG">
<style type="text/css">
DIV.black{line-height:25px;PADDING-RIGHT:1px;PADDING-LEFT:1px;FONT-SIZE:100%;MARGIN:1px;COLOR:#909090;BACKGROUND-COLOR:#000;TEXT-ALIGN:left}
DIV.black A{BORDER-RIGHT:#909090 1px solid;PADDING-RIGHT:5px;BACKGROUND-POSITION:50% bottom;BORDER-TOP:#909090 1px solid;PADDING-LEFT:5px;BACKGROUND-IMAGE:url();PADDING-BOTTOM:2px;BORDER-LEFT:#909090 1px solid;COLOR:#fff;MARGIN-RIGHT:3px;PADDING-TOP:2px;BORDER-BOTTOM:#909090 1px solid;TEXT-DECORATION:none}
DIV.black A:hover{BORDER-RIGHT:#f0f0f0 1px solid;BORDER-TOP:#f0f0f0 1px solid;BACKGROUND-IMAGE:BORDER-LEFT:#f0f0f0 1px solid;COLOR:#ffffff;BORDER-BOTTOM:#f0f0f0 1px solid;BACKGROUND-COLOR:#404040}
DIV.black A:active{BORDER-RIGHT:#f0f0f0 1px solid;BORDER-TOP:#f0f0f0 1px solid;BACKGROUND-IMAGE:BORDER-LEFT:#f0f0f0 1px solid;COLOR:#ffffff;BORDER-BOTTOM:#f0f0f0 1px solid;BACKGROUND-COLOR:#404040}
.divContent{color:#fff;font-size：30px；
line-height：30px；
font-family：“SimHei”；
text-indent:2em;padding-bottom:10px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;background-color:#000}
input{
color:#ffffff;
background-color:#000000
}
</style>
<div class="container">
<#if "${file.suffix?html}" == "htm" || "${file.suffix?html}" == "html" || "${file.suffix?html}" == "shtml" >
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
${file.name}
<div class="panel-heading">
<h4 class="panel-title"> <strong><font color="red"><input class="GLOkBtn" type="button" value="运行html" onclick="loadXmlData();" /></font></strong>
<a data-toggle="collapse" data-parent="#accordion" onclick="loadText();">
${file.name}
</a>
</h4>
</h4>
</div>
<div class="panel-body">
<div id="divPagenation" class="black" >
</div>
<div id="divContent" class="panel-body">
</div>
<div id="text"></div>
</div>
</div>
</div>
<script type="text/javascript">
<script>
// 将Freemarker的布尔值传递给JavaScript
var scriptjs = ${scriptjs?c}; // ?c 将布尔值转换为字符串true/false
/**
*加载普通文本
*/
function loadText() {
var base64data = $("#textData").val()
var s = Base64.decode(base64data);
var imgReg = /(<img\s+src='\S+'\s*(\/)?>)/gi;
matchContent = s.match(imgReg);
imgContent = s;
if(imgReg.test(s))
{
//将img标签替换为❈
imgContent = s.replace(imgReg,"❈");
}
var Length= 20000;
// 封装DHTMLpagenation
function DHTMLpagenation(content)
{
this.content=content; // 内容
this.contentLength=imgContent.length; // 内容长度
this.pageSizeCount; // 总页数
this.perpageLength= Length; //default perpage byte length.
this.currentPage=1; // 起始页为第1页
this.regularExp=/\d+/; // 建立正则表达式，匹配数字型字符串。
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
// 把第二个参数赋给perpageLength;
arguments.length==2 ? perpageLength = arguments[1] : '';
try {
//创建要显示的DIV
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
// 得到divPagenation容器。
if(document.getElementById("divPagenation"))
{
divDisplayPagenation=document.getElementById("divPagenation");
}
else
{
try
{
//创建分页信息
divDisplayPagenation=document.createElement("DIV");
divDisplayPagenation.id="divPagenation";
document.body.appendChild(divDisplayPagenation);
}
catch(e)
{
return false;
}
}
// 得到divContent容器
if(document.getElementById("divContent"))
{
divDisplayContent=document.getElementById("divContent");
}
else
{
try
{
//创建每页显示内容的消息的DIV
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="divContent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
};
//初始化分页；
//包括把加入CSS，检查是否需要分页
DHTMLpagenation.initialize=function()
{
divDisplayContent.className= contentStyle != null ? contentStyle : "divContent";
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
};
//显示分页栏
DHTMLpagenation.displayPage=function()
{
strDisplayPagenation="";
if(currentPage && currentPage !=1)
{
strDisplayPagenation+='<button onclick="DHTMLpagenation.previous()">上一页</button>';
}
else
{
strDisplayPagenation+="上一页 ";
}
for(var i=1;i<=pageSizeCount;i++)
{
if(i!=currentPage)
{
strDisplayPagenation+='<button onclick="DHTMLpagenation.goto('+i+');">'+i+'</button>';
}
else
{
strDisplayPagenation+=i+" ";
}
}
if(currentPage && currentPage!=pageSizeCount)
{
strDisplayPagenation+='<button onclick="DHTMLpagenation.next()">下一页</button>';
}
else
{
strDisplayPagenation+="下一页 ";
}
strDisplayPagenation+="共 " + pageSizeCount + " 页。<br>每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength' /><input type='button' value='确定' onclick='DHTMLpagenation.change()' />";
divDisplayPagenation.innerHTML=strDisplayPagenation;
};
//上一页
DHTMLpagenation.previous=function()
{
DHTMLpagenation.goto(currentPage-1);
};
//下一页
DHTMLpagenation.next=function()
{
DHTMLpagenation.goto(currentPage+1);
};
//跳转至某一页
DHTMLpagenation.goto=function(iCurrentPage)
{
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage;
var tempContent = "";
//获取当前的内容 里面包含 ❈
var currentContent = imgContent.substr((currentPage-1)*perpageLength,perpageLength);
tempContent = currentContent;
//当前页是否有 ❈ 获取最后一个 ❈ 的位置
var indexOf = currentContent.indexOf("❈");
if(indexOf >= 0)
{
//获取从开始位置到当前页位置的内容
var beginToEndContent = imgContent.substr(0,currentPage*perpageLength);
//获取开始到当前页位置的内容 中的 * 的最后的下标
var reCount = beginToEndContent.split("❈").length - 1;
var contentArray = currentContent.split("❈");
tempContent = replaceStr(contentArray,reCount,matchContent);
}
strDisplayContent=tempContent;
}
else
{
alert("页面参数错误");
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
};
//显示当前页内容
DHTMLpagenation.displayContent=function()
{
divDisplayContent.innerHTML=strDisplayContent;
};
//改变每页的字节数
DHTMLpagenation.change=function()
{
var iPerpageLength = document.getElementById("ctlPerpageLength").value;
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation(s,iPerpageLength);
}
else
{
alert("请输入数字");
}
};
/* currentArray:当前页以 * 分割后的数组
replaceCount:从开始内容到当前页的内容 * 的个数
matchArray ： img标签的匹配的内容
*/
function replaceStr(currentArray,replaceCount,matchArray)
{
var result = "";
for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
{
var temp = (matchArray[j] + currentArray[i]);
result = temp + result;
j--;
}
result = currentArray[0] + result ;
return result;
var div = document.getElementById("text");
div.innerHTML = ""; //
var textData = Base64.decode(base64data);
textData = htmlttt(textData,1);
var textPreData = "<xmp style='background-color: #FFFFFF;overflow-y: scroll;border:none'>" + textData + "</xmp>";
$("#text").append(textPreData);
}
function htmlttt (str,txt){
var s = "";
if(str.length == 0) return "";
s = str.replace(/&amp;/gi,"&");
s = s.replace(/&lt;/gi,"<");
s = s.replace(/&gt;/gi,">");
s = s.replace(/&nbsp;/gi," ");
s = s.replace(/&#39;/gi,"\'");
s = s.replace(/&quot;/gi,"\"");
s = s.replace(/javascript/g,"javascript ");
if (txt === 2){
s = s.replace(/<script/gi, "&lt;script ");
s = s.replace(/javascript/g,"javascript ");
s = s.replace(/<\/script/gi, "&lt;/script ");
s = s.replace(/<iframe/gi, "&lt;iframe ");
s = s.replace(/<\/iframe/gi, "&lt;/iframe ");
s = s.replace(/confirm/gi, "c&onfirm");
s = s.replace(/alert/gi, "a&lert");
s = s.replace(/eval/gi, "e&val");
}
return s;
}
/**
*加载运行
*/
function loadXmlData() {
var base64data = $("#textData").val();
var textData = Base64.decode(base64data);
// 直接使用JavaScript变量进行判断
if (scriptjs) {
textData = htmlttt(textData, 1);
} else {
textData = htmlttt(textData, 2);
}
DHTMLpagenation(s,Length);
/**
$('#text').html(textData);
}
/**
* 初始化
*/
window.onload = function () {
initWaterMark();
loadText();
}
</script>
<#else/>
<#else/>
<link rel="stylesheet" href="highlight/highlight.css">
<script src="js/fenye.js" type="text/javascript"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
@@ -301,31 +104,30 @@ background-color:#000000
</a>
</h4>
</div>
<div class="panel-body">
<div id="text"></div>
<div id="divPagenation" class="black" >
</div>
<div id="divContent" class="panel-body">
</div>
<div id="divPagenationx" class="black" >
</div>
</div>
</div>
<script>
<script type="text/javascript">
var base64data = $("#textData").val()
var s = Base64.decode(base64data);
var kkkeyword = '${highlightall}';
var Length = 20000;
var page = '${page}';
var txt = "txt";
DHTMLpagenation(s, kkkeyword, Length, page, txt);
/**
*加载普通文本
*/
function loadText() {
var base64data = $("#textData").val()
var textData = Base64.decode(base64data);
var textPreData = "<xmp style='background-color: #FFFFFF;overflow-y: scroll;border:none'>" + textData + "</xmp>";
$("#text").append(textPreData);
}
/**
* 初始化
*/
window.onload = function () {
initWaterMark();
loadText();
}
</script>
</#if>
</#if>
</body>
</html>
</html>

7
server/src/main/resources/web/xmind.ftl
View File

@@ -20,10 +20,11 @@
<script src="xmind/xmind.js"></script>
<script type="text/javascript">
var url = '${finalUrl}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (!url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url));
}
const init = async () => {
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;