rpt_test.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Report Demo!</title>
  6. </head>
  7. <body>
  8. <!--
  9. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  10. -->
  11. <script src="/lib/jquery/jquery.min.js"></script>
  12. <script type="text/javascript" src="/web/maintain/report/js/jpc_output_value_define.js"></script>
  13. <script type="text/javascript" src="/web/maintain/report/js/jpc_output.js"></script>
  14. <table id="forPrintHide">
  15. <tr>
  16. <td width="5"></td>
  17. <td>
  18. <select name="select1" id="select_k1" onchange="ajaxCall()">
  19. <option value="2">07-1表</option>
  20. <option value="1">08-2表</option>
  21. <option value="3">计量-清单支付09表</option>
  22. </select>
  23. <select name="select2" id="select_k2" onchange="ajaxCall()">
  24. <option value="A4">A4</option>
  25. <option value="A3">A3</option>
  26. </select>
  27. </td>
  28. <td>
  29. <input type="button" value="显示报表" onclick="ajaxCall()"/>
  30. <input type="button" value="< 前一页" onclick="showPage(-1)"/>
  31. <input type="button" value="后一页 >" onclick="showPage(1)"/>
  32. <input type="button" value="打印" onclick="printCurrentPage()"/>
  33. <input type="button" value="Excel" onclick="getExcel()"/>
  34. <label>
  35. <input type="checkbox" id="isOneSheetChk" onclick="isOneSheet = this.checked;">
  36. Excel单页输出
  37. </label>
  38. </td>
  39. </tr>
  40. </table>
  41. <canvas id="myCanvas" width="2000" height="1280">
  42. </canvas>
  43. </body>
  44. <style>
  45. body {
  46. margin: 0px;
  47. padding: 0px;
  48. }
  49. #myCanvas {
  50. border: 0px solid #9C9898;
  51. }
  52. </style>
  53. <script>
  54. let currentPage = 1;
  55. let pageRst = null;
  56. let currentRptTpl = null;
  57. let maxPages = 20;
  58. let rpt_id = null;
  59. let rpt_size = null;
  60. let isOneSheet = false;
  61. function printCurrentPage() {
  62. if (currentRptTpl) {
  63. //$("table#forPrintHide").css
  64. $("table#forPrintHide").css("display","none");
  65. window.print();
  66. //$("canvas#myCanvas").printArea();
  67. }
  68. }
  69. function getScreenDPI() {
  70. let me = this, arrDPI = [];
  71. if (window.screen.deviceXDPI != undefined) {
  72. arrDPI.push(window.screen.deviceXDPI);
  73. arrDPI.push(window.screen.deviceYDPI);
  74. } else {
  75. let tmpNode = document.createElement("DIV");
  76. tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
  77. document.body.appendChild(tmpNode);
  78. arrDPI.push(parseInt(tmpNode.offsetWidth));
  79. arrDPI.push(parseInt(tmpNode.offsetHeight));
  80. tmpNode.parentNode.removeChild(tmpNode);
  81. }
  82. return arrDPI;
  83. }
  84. function setupReport() {
  85. let rst = false;
  86. let rpt = document.getElementById("select_k1");
  87. let size = document.getElementById("select_k2");
  88. if (rpt.selectedIndex >= 0 && size.selectedIndex >= 0) {
  89. rpt_id = rpt.options[rpt.selectedIndex].value;
  90. rpt_size = size.options[size.selectedIndex].value;
  91. rst = true;
  92. }
  93. return rst;
  94. }
  95. function showPage(pageStep, cv) {
  96. if (currentPage + pageStep >= 1 && currentPage + pageStep <= maxPages) {
  97. currentPage = currentPage + pageStep;
  98. let canvas = null;
  99. if (cv) {
  100. canvas = cv;
  101. } else canvas = document.getElementById("myCanvas");
  102. JpcCanvasOutput.cleanCanvas(canvas);
  103. JpcCanvasOutput.drawPageBorder(currentRptTpl, canvas, getScreenDPI());
  104. JpcCanvasOutput.drawToCanvas(pageRst, canvas, currentPage);
  105. }
  106. }
  107. function getDummyExcel() {
  108. let id = "dummy_request_id";
  109. let p1 = "dummy_paramm_2";
  110. let url = "/report_api/getDummyExcel/" + id + "/" + p1;
  111. window.location = url;//这里不能使用get方法跳转,否则下载不成功
  112. }
  113. function getExcel() {
  114. let rpt = document.getElementById("select_k1");
  115. let size = document.getElementById("select_k2");
  116. let rpt_name = rpt.options[rpt.selectedIndex].text;
  117. if (rpt.selectedIndex >= 0 && size.selectedIndex >= 0) {
  118. rpt_id = rpt.options[rpt.selectedIndex].value;
  119. rpt_size = size.options[size.selectedIndex].value;
  120. }
  121. let url = "/report_api/getExcel/" + rpt_id + "/" + rpt_size + "/" + rpt_name + "/" + isOneSheet;
  122. window.location = url;//这里不能使用get方法跳转,否则下载不成功
  123. }
  124. function ajaxCall() {
  125. if (setupReport()) {
  126. let canvas = document.getElementById("myCanvas");
  127. canvas.style.cursor = "wait";
  128. $.ajax({
  129. type:"POST",
  130. url: 'report_api/getReport',
  131. data: {"ID": rpt_id, "pageSize": rpt_size},
  132. dataType: 'json',
  133. cache: false,
  134. timeout: 15000,
  135. success: function(result){
  136. canvas.style.cursor = "default";
  137. currentPage = 1;
  138. pageRst = result.data;
  139. if (pageRst) {
  140. //console.log(JSON.stringify(pageRst));
  141. maxPages = pageRst.items.length;
  142. currentRptTpl = pageRst;
  143. if (rpt_size === "A4") {
  144. canvas.width = 1200;
  145. canvas.height = 900;
  146. } else if (rpt_size === "A3") {
  147. canvas.width = 1880;
  148. canvas.height = 1200;
  149. }
  150. showPage(0, canvas);
  151. }
  152. },
  153. error: function(jqXHR, textStatus, errorThrown){
  154. canvas.style.cursor = "default";
  155. alert('error ' + textStatus + " " + errorThrown);
  156. }
  157. });
  158. }
  159. }
  160. </script>
  161. </html>