cnofd-view.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. 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; } } }; }
  2. $("#openFile").click(function() {
  3. openFile();
  4. });
  5. $("#file").change(function() {
  6. fileChanged();
  7. });
  8. $("#zoomIn").click(function() {
  9. zoomIn();
  10. });
  11. $("#zoomOut").click(function() {
  12. zoomOut();
  13. });
  14. $("#zoomValue").change(function() {
  15. zoomChange();
  16. });
  17. $("#firstPage").click(function() {
  18. firstPage();
  19. });
  20. $("#prePage").click(function() {
  21. prePage();
  22. });
  23. $("#nextPage").click(function() {
  24. nextPage();
  25. });
  26. $("#lastPage").click(function() {
  27. lastPage();
  28. });
  29. $("#print").click(function() {
  30. print();
  31. });
  32. $("#main").scroll(function() {
  33. scrool();
  34. });
  35. window.onresize = function() {
  36. return function() {
  37. var contentDiv = document.getElementById("content");
  38. var nowleft = 0;
  39. if (contentDiv.childNodes[0]) nowleft = contentDiv.childNodes[0].offsetLeft;
  40. } ();
  41. };
  42. //监听整个页面的 copy 事件
  43. document.addEventListener('copy',function(event){
  44. let clipboardData = event.clipboardData || window.clipboardData;
  45. if(!clipboardData) return;
  46. let text = window.getSelection().toString();
  47. if(text){
  48. var copytext = text.replace(/\n|\r/g, ""); //去除换行符
  49. if (window.clipboardData) { // Internet Explorer
  50. window.clipboardData.setData ("Text", copytext);
  51. } else {
  52. var newdiv = document.createElement('div');
  53. newdiv.style.position='absolute';
  54. newdiv.style.left='-99999px';
  55. var body_element = document.getElementsByTagName('body')[0];
  56. body_element.appendChild(newdiv);
  57. newdiv.innerHTML = copytext;
  58. window.getSelection().selectAllChildren(newdiv);
  59. window.setTimeout(function() {
  60. body_element.removeChild(newdiv);
  61. },0);
  62. }
  63. }
  64. });
  65. // 手机端,隐藏缩放比例选择框,打开文件和打印按钮
  66. if (this.isMobile()) {
  67. if (document.getElementById("zoomSelect")) document.getElementById("zoomSelect").style.display = "none";
  68. if (document.getElementById("openFile")) document.getElementById("openFile").style.display = "none";
  69. if (document.getElementById("print")) document.getElementById("print").style.display = "none";
  70. if (document.getElementById("separator1")) document.getElementById("separator1").style.display = "none";
  71. if (document.getElementById("separator2")) document.getElementById("separator2").style.display = "none";
  72. }
  73. // 判断手机端还是PC端
  74. function isMobile() {
  75. 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);
  76. return flag;
  77. }
  78. // 判断是否IE浏览器
  79. function isIE() {
  80. var navigator = window.navigator.userAgent;
  81. if (navigator.indexOf("MSIE") > 0 || navigator.indexOf("Trident") > 0) {
  82. return true;
  83. }
  84. return false;
  85. }
  86. this.screenWidth = document.body.clientWidth;
  87. // cnofd提供浏览器端和服务端两种OFD版式文件的解析渲染模式。
  88. // 服务器渲染模式;浏览器端渲染时,请注释以下两行代码
  89. //Object(cnofd["setRenderMode"])("Server");
  90. //Object(cnofd["setServerUrl"])("http://localhost:8080/api/ofdrender/");
  91. data: function data() {
  92. return {
  93. leftMenuWidth: 0,
  94. ofdBase64: null,
  95. pageIndex: 1,
  96. pageCount: 0,
  97. title: null,
  98. value: null,
  99. ofdDoc: null,
  100. screenWidth: document.body.clientWidth,
  101. ofdDiv: null,
  102. isFont: false
  103. };
  104. }
  105. this.pageZoomScale = "1.0";
  106. cnofd["setScaleValue"](this.pageZoomScale);
  107. var scale = this.getQueryVariable("scale");
  108. if (scale && (scale == "width" || Number(scale))) {
  109. this.pageZoomScale = scale;
  110. cnofd["setScaleValue"](scale);
  111. }
  112. var file = this.getQueryVariable("file");
  113. file = decodeURIComponent(file);
  114. if (file) this.loadOfdFile(file);
  115. if (scale && (scale == "width" || Number(scale))) {
  116. var selectZoom = document.getElementById("zoomValue");
  117. selectZoom.selectedIndex = -1;
  118. if (this.pageZoomScale == "width") {
  119. selectZoom.selectedIndex = 0;
  120. } else {
  121. for (var i = 1; i < selectZoom.length; i++) {
  122. if (Math.abs(this.pageZoomScale - selectZoom.options[i].value) < 0.01) {
  123. selectZoom.selectedIndex = i;
  124. break;
  125. }
  126. }
  127. }
  128. }
  129. function getQueryVariable(variable) {
  130. var query = window.location.search.substring(1);
  131. var vars = query.split("&");
  132. for (var i = 0; i < vars.length; i++) {
  133. var pair = vars[i].split("=");
  134. if (pair[0] == variable) {
  135. return pair[1];
  136. }
  137. }
  138. return false;
  139. }
  140. function loadOfdFile(ofdFile) {
  141. var that = this;
  142. JSZipUtils.getBinaryContent(ofdFile,
  143. function(err, data) {
  144. if (err) {
  145. console.log(err);
  146. } else {
  147. var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(data)));
  148. that.ofdBase64 = base64String;
  149. }
  150. });
  151. this.getOfdDocument(ofdFile, this.screenWidth, this.pageZoomScale);
  152. setPageInfo();
  153. }
  154. function openFile() {
  155. this.isFont = false;
  156. this.file = null;
  157. $("#file")[0].click();
  158. }
  159. function fileChanged() {
  160. this.file = $("#file")[0].files[0];
  161. if (this.file == null)
  162. return;
  163. var ext = this.file.name.replace(/.+\./, "");
  164. if (["ofd"].indexOf(ext) === -1) {
  165. window.alert("error,仅支持ofd文件类型");
  166. return;
  167. }
  168. if (this.file.size > 20 * 1024 * 1024) {
  169. window.alert("error,文件大小超过20MB");
  170. return;
  171. }
  172. Object(cnofd["setScaleValue"])(this.pageZoomScale);
  173. var selectZoom = document.getElementById("zoomValue");
  174. if (selectZoom)
  175. selectZoom.value = this.pageZoomScale;
  176. var that = this;
  177. var reader = new FileReader();
  178. reader.readAsDataURL(this.file);
  179. reader.onload = function(e) {
  180. that.ofdBase64 = e.target.result.split(",")[1];
  181. };
  182. this.getOfdDocument(this.file, this.screenWidth, this.pageZoomScale);
  183. }
  184. function getOfdDocument(file, screenWidth, pageZoomScale) {
  185. var that = this;
  186. $("#loading").show();
  187. var contentDiv = document.getElementById("content");
  188. contentDiv.innerHTML = "";
  189. Object(cnofd["ofdParse"])({
  190. ofd: file,
  191. success: function success(res) {
  192. that.ofdDoc = res;
  193. that.pageIndex = 1;
  194. that.pageCount = res.pageCount;
  195. if (pageZoomScale == "width") {
  196. var divs = Object(cnofd["ofdRender"])(res, screenWidth);
  197. that.displayOfdDiv(divs);
  198. } else {
  199. var divs = Object(cnofd["ofdRenderByScale"])(res, screenWidth, pageZoomScale);
  200. that.displayOfdDiv(divs);
  201. }
  202. $("#loading").hide();
  203. },
  204. fail: function fail(error) {
  205. $("#loading").hide();
  206. console.log('OFD打开失败');
  207. }
  208. });
  209. }
  210. function displayOfdDiv(divs) {
  211. var contentDiv = document.getElementById("content");
  212. contentDiv.innerHTML = "";
  213. var _iterator3 = _createForOfIteratorHelper(divs),
  214. _step3;
  215. try {
  216. for (_iterator3.s(); ! (_step3 = _iterator3.n()).done;) {
  217. var div = _step3.value;
  218. contentDiv.appendChild(div);
  219. }
  220. } catch(err) {
  221. _iterator3.e(err);
  222. } finally {
  223. _iterator3.f();
  224. }
  225. setPageInfo();
  226. }
  227. function zoomIn() {
  228. var selectZoom = document.getElementById("zoomValue");
  229. if (selectZoom.selectedIndex > 1) {
  230. selectZoom.selectedIndex = selectZoom.selectedIndex - 1;
  231. Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
  232. var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
  233. if (divs) {
  234. this.displayOfdDiv(divs);
  235. } else {
  236. this.getOfdDocument(this.file, this.screenWidth);
  237. }
  238. }
  239. }
  240. function zoomOut() {
  241. var selectZoom = document.getElementById("zoomValue");
  242. if (selectZoom.selectedIndex < selectZoom.length-1) {
  243. selectZoom.selectedIndex = selectZoom.selectedIndex + 1;
  244. if (selectZoom.selectedIndex == 0) selectZoom.selectedIndex = 1;
  245. Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
  246. var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
  247. if (divs) {
  248. this.displayOfdDiv(divs);
  249. } else {
  250. this.getOfdDocument(this.file, this.screenWidth);
  251. }
  252. }
  253. }
  254. function zoomChange() {
  255. var selectZoom = document.getElementById("zoomValue");
  256. if (selectZoom.options[selectZoom.selectedIndex].value == "width") {
  257. Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
  258. var divs = Object(cnofd["ofdRender"])(this.ofdDoc, this.screenWidth);
  259. if (divs) {
  260. this.displayOfdDiv(divs);
  261. } else {
  262. this.getOfdDocument(this.file, this.screenWidth);
  263. }
  264. } else {
  265. Object(cnofd["setScaleValue"])(selectZoom.options[selectZoom.selectedIndex].value);
  266. var divs = Object(cnofd["ofdRenderByScale"])(this.ofdDoc);
  267. if (divs) {
  268. this.displayOfdDiv(divs);
  269. } else {
  270. this.getOfdDocument(this.file, this.screenWidth);
  271. }
  272. }
  273. }
  274. function scrool() {
  275. var contentDiv = document.getElementById("content");
  276. var contentDiv1 = contentDiv.firstElementChild;
  277. var scrolled = (contentDiv1 === null || contentDiv1 === void 0 ? void 0 : contentDiv1.getBoundingClientRect() === null || contentDiv1.getBoundingClientRect() === void 0 ? void 0 : contentDiv1.getBoundingClientRect().top) - 60;
  278. var top = 0;
  279. var index = 0;
  280. for (var i = 0; i < contentDiv.childElementCount; i++) {
  281. var contentDiv2 = contentDiv.children.item(i);
  282. 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", ""));
  283. if (Math.abs(scrolled) < top) {
  284. index = i;
  285. break;
  286. }
  287. }
  288. this.pageIndex = index + 1;
  289. setPageInfo();
  290. }
  291. function setPageInfo() {
  292. if (! (this.pageCount == null) && this.pageCount > 0) {
  293. $("#pageInfo")[0].innerText = this.pageIndex + "/" + this.pageCount;
  294. }
  295. }
  296. function prePage() {
  297. var contentDiv = document.getElementById("content");
  298. var ele = contentDiv.children.item(this.pageIndex - 2);
  299. ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
  300. ele ? this.pageIndex = this.pageIndex - 1 : "";
  301. setPageInfo();
  302. }
  303. function firstPage() {
  304. var contentDiv = document.getElementById("content");
  305. var ele = contentDiv.firstElementChild;
  306. ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
  307. ele ? this.pageIndex = 1 : "";
  308. setPageInfo();
  309. }
  310. function nextPage() {
  311. var contentDiv = document.getElementById("content");
  312. var ele = contentDiv.children.item(this.pageIndex);
  313. ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
  314. ele ? ++this.pageIndex: "";
  315. setPageInfo();
  316. }
  317. function lastPage() {
  318. var contentDiv = document.getElementById("content");
  319. var ele = contentDiv.children.item(contentDiv.childElementCount - 1);
  320. ele === null || ele === void 0 ? void 0 : ele.scrollIntoView(true);
  321. ele ? this.pageIndex = contentDiv.childElementCount : "";
  322. setPageInfo();
  323. }
  324. function print() {
  325. var contentDiv = document.getElementById("content");
  326. var contentDivChilds = contentDiv.children;
  327. var list = [];
  328. for (var i = 0; i < contentDivChilds.length; i++) {
  329. var ele = contentDivChilds.item(i);
  330. list.push(ele.cloneNode(true));
  331. this.percentage = i / contentDivChilds.length;
  332. }
  333. if (list.length > 0) {
  334. if (!isIE()) {
  335. var mywindow = window.open("打印窗口", "_blank");
  336. mywindow.document.write('<!DOCTYPE html><html><head>'
  337. +'<style media="print">.page-break { page-break-inside: avoid; page-break-after: always; }</style>'
  338. +'</head><body></body</html>');
  339. var documentBody = mywindow.document.body;
  340. var _iterator2 = _createForOfIteratorHelper(list),
  341. _step2;
  342. try {
  343. for (_iterator2.s(); ! (_step2 = _iterator2.n()).done;) {
  344. var canvas = _step2.value;
  345. canvas.style.margin = "";
  346. canvas.style.boxShadow = "";
  347. documentBody.appendChild(canvas);
  348. }
  349. } catch(err) {
  350. _iterator2.e(err);
  351. } finally {
  352. _iterator2.f();
  353. }
  354. mywindow.focus();
  355. mywindow.print();
  356. mywindow.close();
  357. } else {
  358. var printhtml = "";
  359. for (var i=0; i < list.length; i++) {
  360. var canvas = list[i];
  361. canvas.style.margin = "";
  362. canvas.style.boxShadow = "";
  363. printhtml = printhtml + canvas.outerHTML;
  364. }
  365. printIE(printhtml);
  366. }
  367. }
  368. }
  369. function printIE(printhtml) {
  370. var iframe = document.createElement("iframe");
  371. iframe.id = "printf";
  372. iframe.style.width = "0";
  373. iframe.style.display = "none"
  374. iframe.style.height = "0";
  375. iframe.style.border = "none";
  376. document.body.appendChild(iframe);
  377. setTimeout(function () {
  378. iframe.contentDocument.write(" <script type='text/javascript'> window.onload = function() { document.execCommand('print'); } </script> " + printhtml);
  379. iframe.contentDocument.close();
  380. },
  381. 100)
  382. }