txt.ftl 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
  6. <title>${file.name}普通文本预览</title>
  7. <#include "*/commonHeader.ftl">
  8. <script src="js/jquery-3.6.1.min.js" type="text/javascript"></script>
  9. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  10. <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  11. <script src="js/base64.min.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <input hidden id="textData" value="${textData}"/>
  15. <#if "${file.suffix?html}" == "txt" || "${file.suffix?html}" == "log" || "${file.suffix?html}" == "TXT" || "${file.suffix?html}" == "LOG">
  16. <style type="text/css">
  17. DIV.black{line-height:25px;PADDING-RIGHT:1px;PADDING-LEFT:1px;FONT-SIZE:100%;MARGIN:1px;COLOR:#909090;BACKGROUND-COLOR:#000;TEXT-ALIGN:left}
  18. 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}
  19. 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}
  20. 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}
  21. .divContent{color:#fff;font-size:30px;
  22. line-height:30px;
  23. font-family:“SimHei”;
  24. 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}
  25. input{
  26. color:#ffffff;
  27. background-color:#000000
  28. }
  29. </style>
  30. <div class="container">
  31. <div class="panel panel-default">
  32. <div class="panel-heading">
  33. <h4 class="panel-title">
  34. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  35. ${file.name}
  36. </a>
  37. </h4>
  38. </div>
  39. <div class="panel-body">
  40. <div id="divPagenation" class="black" >
  41. </div>
  42. <div id="divContent" class="panel-body">
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <script type="text/javascript">
  48. var base64data = $("#textData").val()
  49. var s = Base64.decode(base64data);
  50. var imgReg = /(<img\s+src='\S+'\s*(\/)?>)/gi;
  51. matchContent = s.match(imgReg);
  52. imgContent = s;
  53. if(imgReg.test(s))
  54. {
  55. //将img标签替换为❈
  56. imgContent = s.replace(imgReg,"❈");
  57. }
  58. var Length= 20000;
  59. // 封装DHTMLpagenation
  60. function DHTMLpagenation(content)
  61. {
  62. this.content=content; // 内容
  63. this.contentLength=imgContent.length; // 内容长度
  64. this.pageSizeCount; // 总页数
  65. this.perpageLength= Length; //default perpage byte length.
  66. this.currentPage=1; // 起始页为第1页
  67. this.regularExp=/\d+/; // 建立正则表达式,匹配数字型字符串。
  68. this.divDisplayContent;
  69. this.contentStyle=null;
  70. this.strDisplayContent="";
  71. this.divDisplayPagenation;
  72. this.strDisplayPagenation="";
  73. // 把第二个参数赋给perpageLength;
  74. arguments.length==2 ? perpageLength = arguments[1] : '';
  75. try {
  76. //创建要显示的DIV
  77. divExecuteTime=document.createElement("DIV");
  78. document.body.appendChild(divExecuteTime);
  79. }
  80. catch(e)
  81. {
  82. }
  83. // 得到divPagenation容器。
  84. if(document.getElementById("divPagenation"))
  85. {
  86. divDisplayPagenation=document.getElementById("divPagenation");
  87. }
  88. else
  89. {
  90. try
  91. {
  92. //创建分页信息
  93. divDisplayPagenation=document.createElement("DIV");
  94. divDisplayPagenation.id="divPagenation";
  95. document.body.appendChild(divDisplayPagenation);
  96. }
  97. catch(e)
  98. {
  99. return false;
  100. }
  101. }
  102. // 得到divContent容器
  103. if(document.getElementById("divContent"))
  104. {
  105. divDisplayContent=document.getElementById("divContent");
  106. }
  107. else
  108. {
  109. try
  110. {
  111. //创建每页显示内容的消息的DIV
  112. divDisplayContent=document.createElement("DIV");
  113. divDisplayContent.id="divContent";
  114. document.body.appendChild(divDisplayContent);
  115. }
  116. catch(e)
  117. {
  118. return false;
  119. }
  120. }
  121. DHTMLpagenation.initialize();
  122. return this;
  123. };
  124. //初始化分页;
  125. //包括把加入CSS,检查是否需要分页
  126. DHTMLpagenation.initialize=function()
  127. {
  128. divDisplayContent.className= contentStyle != null ? contentStyle : "divContent";
  129. if(contentLength<=perpageLength)
  130. {
  131. strDisplayContent=content;
  132. divDisplayContent.innerHTML=strDisplayContent;
  133. return null;
  134. }
  135. pageSizeCount=Math.ceil((contentLength/perpageLength));
  136. DHTMLpagenation.goto(currentPage);
  137. DHTMLpagenation.displayContent();
  138. };
  139. //显示分页栏
  140. DHTMLpagenation.displayPage=function()
  141. {
  142. strDisplayPagenation="";
  143. if(currentPage && currentPage !=1)
  144. {
  145. strDisplayPagenation+='<button onclick="DHTMLpagenation.previous()">上一页</button>';
  146. }
  147. else
  148. {
  149. strDisplayPagenation+="上一页 ";
  150. }
  151. for(var i=1;i<=pageSizeCount;i++)
  152. {
  153. if(i!=currentPage)
  154. {
  155. strDisplayPagenation+='<button onclick="DHTMLpagenation.goto('+i+');">'+i+'</button>';
  156. }
  157. else
  158. {
  159. strDisplayPagenation+=i+" ";
  160. }
  161. }
  162. if(currentPage && currentPage!=pageSizeCount)
  163. {
  164. strDisplayPagenation+='<button onclick="DHTMLpagenation.next()">下一页</button>';
  165. }
  166. else
  167. {
  168. strDisplayPagenation+="下一页 ";
  169. }
  170. strDisplayPagenation+="共 " + pageSizeCount + " 页。<br>每页" + perpageLength + " 字符,调整字符数:<input type='text' value='"+perpageLength+"' id='ctlPerpageLength' /><input type='button' value='确定' onclick='DHTMLpagenation.change()' />";
  171. divDisplayPagenation.innerHTML=strDisplayPagenation;
  172. };
  173. //上一页
  174. DHTMLpagenation.previous=function()
  175. {
  176. DHTMLpagenation.goto(currentPage-1);
  177. };
  178. //下一页
  179. DHTMLpagenation.next=function()
  180. {
  181. DHTMLpagenation.goto(currentPage+1);
  182. };
  183. //跳转至某一页
  184. DHTMLpagenation.goto=function(iCurrentPage)
  185. {
  186. if(regularExp.test(iCurrentPage))
  187. {
  188. currentPage=iCurrentPage;
  189. var tempContent = "";
  190. //获取当前的内容 里面包含 ❈
  191. var currentContent = imgContent.substr((currentPage-1)*perpageLength,perpageLength);
  192. tempContent = currentContent;
  193. //当前页是否有 ❈ 获取最后一个 ❈ 的位置
  194. var indexOf = currentContent.indexOf("❈");
  195. if(indexOf >= 0)
  196. {
  197. //获取从开始位置到当前页位置的内容
  198. var beginToEndContent = imgContent.substr(0,currentPage*perpageLength);
  199. //获取开始到当前页位置的内容 中的 * 的最后的下标
  200. var reCount = beginToEndContent.split("❈").length - 1;
  201. var contentArray = currentContent.split("❈");
  202. tempContent = replaceStr(contentArray,reCount,matchContent);
  203. }
  204. strDisplayContent=tempContent;
  205. }
  206. else
  207. {
  208. alert("页面参数错误");
  209. }
  210. DHTMLpagenation.displayPage();
  211. DHTMLpagenation.displayContent();
  212. };
  213. //显示当前页内容
  214. DHTMLpagenation.displayContent=function()
  215. {
  216. divDisplayContent.innerHTML=strDisplayContent;
  217. };
  218. //改变每页的字节数
  219. DHTMLpagenation.change=function()
  220. {
  221. var iPerpageLength = document.getElementById("ctlPerpageLength").value;
  222. if(regularExp.test(iPerpageLength))
  223. {
  224. DHTMLpagenation(s,iPerpageLength);
  225. }
  226. else
  227. {
  228. alert("请输入数字");
  229. }
  230. };
  231. /* currentArray:当前页以 * 分割后的数组
  232. replaceCount:从开始内容到当前页的内容 * 的个数
  233. matchArray : img标签的匹配的内容
  234. */
  235. function replaceStr(currentArray,replaceCount,matchArray)
  236. {
  237. var result = "";
  238. for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
  239. {
  240. var temp = (matchArray[j] + currentArray[i]);
  241. result = temp + result;
  242. j--;
  243. }
  244. result = currentArray[0] + result ;
  245. return result;
  246. }
  247. DHTMLpagenation(s,Length);
  248. /**
  249. * 初始化
  250. */
  251. window.onload = function () {
  252. initWaterMark();
  253. }
  254. </script>
  255. <#else/>
  256. <div class="container">
  257. <div class="panel panel-default">
  258. <div class="panel-heading">
  259. <h4 class="panel-title">
  260. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  261. ${file.name}
  262. </a>
  263. </h4>
  264. </div>
  265. <div class="panel-body">
  266. <div id="text"></div>
  267. </div>
  268. </div>
  269. </div>
  270. <script>
  271. /**
  272. *加载普通文本
  273. */
  274. function loadText() {
  275. var base64data = $("#textData").val()
  276. var textData = Base64.decode(base64data);
  277. var textPreData = "<xmp style='background-color: #FFFFFF;overflow-y: scroll;border:none'>" + textData + "</xmp>";
  278. $("#text").append(textPreData);
  279. }
  280. /**
  281. * 初始化
  282. */
  283. window.onload = function () {
  284. initWaterMark();
  285. loadText();
  286. }
  287. </script>
  288. </#if>
  289. </body>
  290. </html>