Bez popisu

printPreview.html 7.1KB

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