ZZDianXin_UI - 郑州电信 演示

printPreview.html 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>报表预览</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link rel="stylesheet" href="css/printPreview_n.css" />
  10. <!--<link rel="stylesheet" href="css/printPreview_p.css" media="print" />-->
  11. </head>
  12. <body>
  13. <!--startprint1-->
  14. <div id="printPreview">
  15. <div class="alignC headerAlign">
  16. <h2>新乡县民意调查中心<br>反映问题登记表</h2>
  17. <h3>
  18. <div>工单编号: <span class="t_workOrders"></span></div>
  19. </h3>
  20. </div>
  21. <table class="alignC tableLists" border="1">
  22. <tbody>
  23. <tr height="43px">
  24. <td>姓 名</td>
  25. <td class="t_name"></td>
  26. <td>电 话</td>
  27. <td class="t_tel"></td>
  28. </tr>
  29. <tr height="43px">
  30. <td>调查时间</td>
  31. <td class="t_time"></td>
  32. <td>调查员</td>
  33. <td class="t_investigator"></td>
  34. </tr>
  35. <tr height="43px">
  36. <td>信息分类</td>
  37. <td class="t_infoCls"></td>
  38. <td>交办单位</td>
  39. <td class="t_dept"></td>
  40. </tr>
  41. <tr height="43px">
  42. <td>地 址</td>
  43. <td class="t_address" colspan="3"></td>
  44. </tr>
  45. <tr height="184px">
  46. <td>反映问题</td>
  47. <td class="t_reactionPro" colspan="3"></td>
  48. </tr>
  49. <tr height="156px">
  50. <td>问题处理<br>情况</td>
  51. <td class="t_proHandling" colspan="3"></td>
  52. </tr>
  53. <tr height="118px">
  54. <td>回访反馈<br>情况</td>
  55. <td class="t_feedback" colspan="3"></td>
  56. </tr>
  57. <tr height="64px">
  58. <td>备 注</td>
  59. <td class="t_remarks" colspan="3"></td>
  60. </tr>
  61. <tr height="43px">
  62. <td>调查对象签名</td>
  63. <td class="t_investigationSign"></td>
  64. <!--<td>调查人签字</td>-->
  65. <td>问题办理人<br>签名</td>
  66. <td class="t_InvestigatorSign"></td>
  67. </tr>
  68. <tr height="43px">
  69. <td>回访人签名</td>
  70. <td class="t_revisit"></td>
  71. <td class=""></td>
  72. <td class=""></td>
  73. </tr>
  74. </tbody>
  75. </table>
  76. </div>
  77. <!--endprint1-->
  78. <div class="alignC exportBtn">
  79. <input type="button" value="导出PDF" class="btn" id="btn_html2pdf" />
  80. <input type="button" value="打印" class="btn hidden" onclick="preview(1)" />
  81. </div>
  82. <script src="../js/html2pdf/jspdf.debug.js"></script>
  83. <script src="../js/html2pdf/html2canvas.js"></script>
  84. <script src="../js/html2pdf/canvas2image.js"></script>
  85. <script type="text/javascript">
  86. $(document).ready(function() {
  87. var wid = helper.request.queryString("wid");
  88. if(wid) {
  89. $('.t_workOrders').text(wid);//编号
  90. workOrderInfo(wid);
  91. }
  92. //导出pdf点击事件
  93. $('#btn_html2pdf').on('click',convert2pdf);
  94. //document.getElementById("btn_html2pdf").onclick = convert2pdf;
  95. });
  96. //获取信息
  97. function workOrderInfo(oid){
  98. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', {
  99. orderid: oid,
  100. token: $.cookie("token")
  101. }, function(result) {
  102. if(result.state.toLowerCase() == "success") {
  103. var res = result.data.data;
  104. if(res.length > 0){
  105. var content = result.data.data[0];
  106. $('.t_name').text(content.Customer);//姓名
  107. $('.t_tel').text(content.CustomerTel);//电话
  108. $('.t_time').text(content.Inqtime && content.Inqtime.split(' ')[0]);//调查时间
  109. $('.t_investigator').text(content.Inquser);//调查员
  110. $('.t_infoCls').text(content.InfoType);//信息分类
  111. $('.t_dept').text(content.Unit);//交办单位
  112. $('.t_address').text(content.Address);//地址
  113. var reactionPro = content.Detail;
  114. if(reactionPro){
  115. reactionPro = reactionPro.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />");
  116. $('.t_reactionPro').html(reactionPro);//反映问题
  117. }else{
  118. $('.t_reactionPro').html("");//反映问题
  119. }
  120. $('.t_proHandling').text(content.clcontent);//问题处理情况
  121. $('.t_feedback').text(content.Answer);//回访反馈情况
  122. $('.t_remarks').text(content.Remark);//备注
  123. }
  124. }
  125. })
  126. }
  127. //导出pdf处理过清晰度
  128. function convert2pdf() {
  129. var indexLoad = layer.load();
  130. var cntElem = $('#printPreview')[0];
  131. var shareContent = cntElem; //需要截图的包裹的(原生的)DOM 对象
  132. var width = shareContent.offsetWidth; //获取dom 宽度
  133. var height = shareContent.offsetHeight; //获取dom 高度
  134. var canvas = document.createElement("canvas"); //创建一个canvas节点
  135. var scale = 2; //定义任意放大倍数 支持小数
  136. canvas.width = width * scale; //定义canvas 宽度 * 缩放
  137. canvas.height = height * scale; //定义canvas高度 *缩放
  138. canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
  139. var opts = {
  140. scale: scale, // 添加的scale 参数
  141. canvas: canvas, //自定义 canvas
  142. // logging: true, //日志开关,便于查看html2canvas的内部执行流程
  143. width: width, //dom 原始宽度
  144. height: height,
  145. useCORS: true // 【重要】开启跨域配置
  146. };
  147. html2canvas(shareContent, opts).then(function(canvas) {
  148. var context = canvas.getContext('2d');
  149. // 【重要】关闭抗锯齿
  150. context.mozImageSmoothingEnabled = false;
  151. context.webkitImageSmoothingEnabled = false;
  152. context.msImageSmoothingEnabled = false;
  153. context.imageSmoothingEnabled = false;
  154. var w = canvas.width;
  155. var h = canvas.height;
  156. // 【重要】默认转化的格式为png,也可设置为其他格式
  157. var img = Canvas2Image.convertToJPEG(canvas, w, h, 'jpeg');
  158. var imgData = $(img).attr('src');
  159. var doc = new jsPDF("p", "mm", "a4");
  160. /* A0 841×1189
  161. A1 594×841
  162. A2 420×594
  163. A3 297×420
  164. A4 210×297
  165. A5 148×210
  166. A6 105×148
  167. A7 74×105
  168. A8 52×74
  169. A9 37×52
  170. A10 26×37*/
  171. doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  172. doc.save('新乡县民意调查中心反映问题登记表.pdf');
  173. layer.close(indexLoad);
  174. //layer.msg('导出成功!');
  175. });
  176. }
  177. //打印
  178. function preview(oper) {
  179. if(oper < 5) {
  180. bdhtml = window.document.body.innerHTML; //获取当前页的html代码
  181. sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
  182. eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
  183. prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
  184. print.portrait = true; //纵向打印
  185. prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
  186. window.document.body.innerHTML = prnhtml;
  187. window.print();
  188. window.document.body.innerHTML = bdhtml;
  189. } else {
  190. window.print();
  191. }
  192. }
  193. </script>
  194. </body>
  195. </html>