rpt_test.html 6.8 KB

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