商丘12345 前端

PrintPreview-1.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  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="../js/jquery.min.js?v=2.1.4"></script>
  8. <script src="../Script/Common/huayi.load.js"></script>
  9. <script src="../Script/Common/huayi.config.js"></script>
  10. <script src="../js/jquery.cookie.js"></script>
  11. <!--</METAHTTP-EQUIV="Pragma" CONTENT="no-cache">
  12. </METAHTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  13. </METAHTTP-EQUIV="Expires" CONTENT="0">-->
  14. <style>
  15. #main {
  16. width: 788.8px;
  17. /*margin: 0 auto;*/
  18. -webkit-box-shadow: 1px 1px 9px 2px #D2D2D2;
  19. box-shadow: 1px 1px 9px 2px #D2D2D2;
  20. background-color: #fff;
  21. padding: 30px 60px 80px 60px;
  22. }
  23. .alignC {
  24. text-align: center;
  25. }
  26. .alignC h2 {
  27. font-family: "宋体";
  28. font-weight: bold;
  29. font-size: 22pt;
  30. letter-spacing: -1px;
  31. }
  32. .headerAlign h3 div:nth-of-type(1) {
  33. font-size: 14pt;
  34. padding-top: 20px;
  35. text-align: left;
  36. font-weight: normal;
  37. margin-left: 38px;
  38. }
  39. .headerAlign h3 {
  40. width: 646px;
  41. }
  42. #main table {
  43. margin: 0 auto;
  44. width: 621px;
  45. border-collapse: collapse;
  46. font-size: 13pt;
  47. font-family: "仿宋";
  48. }
  49. tbody td {
  50. min-width: 10%;
  51. padding: 6px 0 6px 0;
  52. }
  53. .btn {
  54. margin-top: 4px;
  55. margin-bottom: 4px;
  56. background: #00a1cb;
  57. color: #fff;
  58. }
  59. .lxr,
  60. .mmdj,
  61. .jbyj,
  62. .cbyj,
  63. .ldps,
  64. .bljg {
  65. white-space: normal;
  66. word-break: break-all;
  67. }
  68. /* .mmdj,.lxr,.cbyj,.ldps,.bljg{
  69. width: 539px;
  70. display: inline-block;
  71. } */
  72. .jbyj {
  73. width: 558px;
  74. display: inline-block;
  75. }
  76. .printdz {
  77. text-align: left;
  78. text-indent: .3em;
  79. padding: 4px;
  80. }
  81. .printdd {
  82. text-align: justify;
  83. padding: 4px 2px 4px 4px;
  84. }
  85. .printnr,
  86. .printcb,
  87. .printldps,
  88. .printcljg {
  89. text-align: justify;
  90. padding: 4px;
  91. text-indent: 2em;
  92. }
  93. </style>
  94. <style media="print">
  95. /*设置打印样式 标题宋体加黑二号*/
  96. .headerAlign h2 {
  97. font-family: "宋体" !important;
  98. font-weight: bold !important;
  99. font-size: 22pt !important;
  100. letter-spacing: -1px !important;
  101. }
  102. .headerAlign h3 div:nth-of-type(1) {
  103. font-size: 14pt !important;
  104. font-family: "宋体" !important;
  105. font-weight: normal !important;
  106. margin-left: 98px !important;
  107. }
  108. .headerAlign h3 {
  109. width: 690px !important;
  110. }
  111. #main {
  112. padding: 40px 0 0 0 !important;
  113. }
  114. #main table {
  115. font-size: 13pt !important;
  116. font-family: "仿宋" !important;
  117. border-color: #000;
  118. color: #000;
  119. width: 621px !important;
  120. /*page-break-after:avoid !important;*/
  121. }
  122. tbody td {
  123. padding: 6px 0 6px 0 !important;
  124. }
  125. .printdz {
  126. text-align: left;
  127. text-indent: .3em;
  128. padding: 4px;
  129. }
  130. .printdd {
  131. text-align: justify !important;
  132. padding: 4px 2px 4px 4px !important;
  133. }
  134. .printnr,
  135. .printcb,
  136. .printldps,
  137. .printcljg {
  138. text-align: justify !important;
  139. padding: 4px !important;
  140. text-indent: 2em !important;
  141. }
  142. @page {
  143. size: A4 portrait;
  144. }
  145. </style>
  146. </head>
  147. <body>
  148. <!--startprint1-->
  149. <div id="main">
  150. <div class="alignC headerAlign">
  151. <!--<br />-->
  152. <h2 style="margin-bottom: 15px; margin-top: 0;">
  153. 商丘市12345政府服务热线办公室工作交办单
  154. </h2>
  155. <!--<h3>
  156. <div>主办单位: <span class="cbdw"></span></div>
  157. </h3>-->
  158. <!--<h3 id="xbdws" style="display: none; width: 646px;">
  159. <div style="padding-top: 0;">协办单位: <span class="xbdw"></span></div>
  160. </h3>-->
  161. </div>
  162. <table class="alignC" border="1" cellpadding="4" cellspacing="0" bordercolor="#cbcbcb">
  163. <tbody>
  164. <tr style="min-height: 49px;">
  165. <td>
  166. 主办<br/>单位
  167. </td>
  168. <td colspan="5" style="text-align: left;">
  169. <span class="cbdw" style="padding-left: 5px;display: inline-block;"></span>
  170. </td>
  171. </tr>
  172. <tr style="min-height: 49px;">
  173. <td>
  174. 协办<br/>单位
  175. </td>
  176. <td colspan="5" style="text-align: left;">
  177. <span class="xbdw" style="padding-left: 5px;display: inline-block;"></span>
  178. </td>
  179. </tr>
  180. <tr style="min-height: 49px;">
  181. <td rowspan="2" width="60px">编号
  182. </td>
  183. <td rowspan="2" width="154px">
  184. <span class="gdbhs"></span>
  185. </td>
  186. <!-- <td rowspan="2" width="95px">受理时间
  187. </td>
  188. <td rowspan="2" width="98px">
  189. <span class="tssj"></span>
  190. </td>-->
  191. <td width="95px">受理时间</td>
  192. <td width="98px">
  193. <span class="tssj"></span>
  194. </td>
  195. <td width="95px">签收时间
  196. </td>
  197. <td width="98px">
  198. <span class="QSHJ"></span>
  199. </td>
  200. </tr>
  201. <tr style="min-height: 49px;">
  202. <td>工单来源</td>
  203. <td>
  204. <span id="sourceName"></span>
  205. </td>
  206. <td>
  207. 办理时限
  208. </td>
  209. <td>
  210. <span class="BLSX"></span>
  211. </td>
  212. </tr>
  213. <tr style="min-height: 49px;">
  214. <td>
  215. 投诉人
  216. </td>
  217. <td>
  218. <span class="gdbh"></span>
  219. </td>
  220. <td>
  221. 联系电话
  222. </td>
  223. <td>
  224. <span class="lxdh"></span>
  225. </td>
  226. <td>
  227. 秘密等级
  228. </td>
  229. <td>
  230. <span class="MJ"></span>
  231. </td>
  232. </tr>
  233. <tr style="min-height: 49px;">
  234. <td>
  235. 地址
  236. </td>
  237. <td class="printdz" colspan="5">
  238. <span class="mmdj"></span>
  239. </td>
  240. </tr>
  241. <tr style="height: 200px;">
  242. <td class="style1">内容<br/>摘要
  243. </td>
  244. <td class="printnr" colspan="5">
  245. <span class="lxr"></span>
  246. </td>
  247. </tr>
  248. <tr style="height: 130px;">
  249. <td>
  250. <span>调度<br/>意见</span>
  251. </td>
  252. <td class="printdd" colspan="5">
  253. <span class="jbyj"></span>
  254. </td>
  255. </tr>
  256. <tr style="height: 130px;">
  257. <td>
  258. <span>承办<br/>意见</span>
  259. </td>
  260. <td class="printcb" colspan="5">
  261. <span class="cbyj"></span>
  262. </td>
  263. </tr>
  264. <tr style="height: 130px;">
  265. <td>
  266. <span>单位领导批示</span>
  267. </td>
  268. <td class="printldps" colspan="5">
  269. <span class="ldps"></span>
  270. </td>
  271. </tr>
  272. <tr style="height: 130px;">
  273. <td>
  274. 单位处理结果
  275. </td>
  276. <td class="printcljg" colspan="5">
  277. <span class="bljg"></span>
  278. </td>
  279. </tr>
  280. </tbody>
  281. </table>
  282. </div>
  283. <!--endprint1-->
  284. <div class="alignC">
  285. <input type="button" value="导出PDF" class="btn" id="btn-html2canvas" />
  286. <input type="button" value="打印" class="btn" onclick="preview(1)" />
  287. </div>
  288. <script src="../js/plugins/html2pdf/jspdf.debug.js"></script>
  289. <script src="../js/plugins/html2pdf/html2canvas.js"></script>
  290. <script src="../js/plugins/html2pdf/canvas2image.js"></script>
  291. <script type="text/javascript">
  292. var wid = helper.request.queryString("wid");
  293. $(document).ready(function() {
  294. if(wid) {
  295. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', {
  296. workorderid: wid,
  297. "token": $.cookie("token")
  298. }, function(result) {
  299. if(result.state.toLowerCase() == "success") {
  300. var content = result.data;
  301. //console.log( content);
  302. $(".gdbhs").text(content.data[0].F_WorkOrderId); //工单
  303. $(".tsfs").text(content.data[0].SourceName);
  304. $(".lxr").text(content.data[0].F_CusName); //内容摘要
  305. $('.lxdh').text(content.data[0].F_CusPhone); //联系电话
  306. //$('.dz').text(content.data[0].F_CusAddress);
  307. //$('.lxrphone').text(content.data[0].F_ConPhone);
  308. $(".lxr ").text(content.data[0].F_ComContent); //内容
  309. var T = content.data[0].F_CreateTime; //受理时间
  310. if(T) {
  311. var S = T.substring(0, T.indexOf(' '));
  312. $('.tssj').text(S);
  313. }
  314. var sourceName = content.data[0].SourceName; //工单来源 20180524 by fanlongfei
  315. if(sourceName) {
  316. $('#sourceName').text(sourceName);
  317. }
  318. if(content.jbdata.length > 0) {
  319. var qst = content.jbdata[content.jbdata.length - 1].F_SureTime; //签收时间
  320. if(qst) {
  321. var qs = qst.substring(0, qst.indexOf(' '));
  322. $('.QSHJ').text(qs);
  323. }
  324. var qst0 = content.jbdata[content.jbdata.length - 1].F_LimitTime; //办理时限
  325. if(qst0) {
  326. var qs0 = qst0.substring(0, qst0.indexOf(' '));
  327. $('.BLSX').html(qs0);
  328. }
  329. }
  330. $(".gdbh").text(content.data[0].F_CusName); //投诉人
  331. $(".mmdj").text(content.data[0].F_SourceAddress); //地址
  332. $(".tslx").text(content.data[0].TypeName1); //偶投诉类型
  333. // 6 || 7 || 9显示办理结果
  334. if(content.data[0].F_WorkState == '6' || content.data[0].F_WorkState == '7' || content.data[0].F_WorkState == '9') {
  335. $(".bljg").text(content.data[0].F_Result); //单位处理结果
  336. }
  337. //密级程度
  338. if(content.data[0].F_IsProtect == 0) {
  339. $('.MJ').text("普通");
  340. } else {
  341. $('.MJ').text("保密");
  342. }
  343. // if (content.data[0].F_Result) {
  344. // var rt = content.data[0].F_Result.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />");
  345. // $(".cljg").html(rt);
  346. // }
  347. // else {
  348. // $(".cljg").html("");
  349. // }
  350. //单位领导批示
  351. //var n=content.psdata.length;
  352. //if (n > 0) {
  353. // var ldps = content.psdata[n - 1].F_SuperOpinion;
  354. // //if (ldps) { ldps = ldps.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />"); }
  355. // $(".ldps").html(ldps);
  356. //}
  357. //调度意见
  358. var m = content.jbdata.length;
  359. if(m > 0) {
  360. $('.cbdw').text(content.jbdata[m - 1].DeptName); //主办单位
  361. if(content.jbdata[m - 1].OtherDeptName) {
  362. $('#xbdws').show();
  363. $('.xbdw').text(content.jbdata[m - 1].OtherDeptName); //协办单位
  364. } else {
  365. $('#xbdws').hide();
  366. }
  367. var jbyjs = content.jbdata[m - 1].F_AssignedOpinion;
  368. if(jbyjs) {
  369. jbyjs = jbyjs.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />");
  370. $(".jbyj").html(jbyjs);
  371. } else {
  372. $(".jbyj").html("");
  373. }
  374. }
  375. }
  376. })
  377. }
  378. //导出pdf点击事件
  379. document.getElementById("btn-html2canvas").onclick = convert2pdf;
  380. })
  381. //导出pdf处理过清晰度
  382. function convert2pdf() {
  383. var cntElem = $('#main')[0];
  384. var shareContent = cntElem; //需要截图的包裹的(原生的)DOM 对象
  385. var width = shareContent.offsetWidth; //获取dom 宽度
  386. var height = shareContent.offsetHeight; //获取dom 高度
  387. var canvas = document.createElement("canvas"); //创建一个canvas节点
  388. var scale = 2; //定义任意放大倍数 支持小数
  389. canvas.width = width * scale; //定义canvas 宽度 * 缩放
  390. canvas.height = height * scale; //定义canvas高度 *缩放
  391. canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
  392. var opts = {
  393. scale: scale, // 添加的scale 参数
  394. canvas: canvas, //自定义 canvas
  395. // logging: true, //日志开关,便于查看html2canvas的内部执行流程
  396. width: width, //dom 原始宽度
  397. height: height,
  398. useCORS: true // 【重要】开启跨域配置
  399. };
  400. html2canvas(shareContent, opts).then(function(canvas) {
  401. var context = canvas.getContext('2d');
  402. // 【重要】关闭抗锯齿
  403. context.mozImageSmoothingEnabled = false;
  404. context.webkitImageSmoothingEnabled = false;
  405. context.msImageSmoothingEnabled = false;
  406. context.imageSmoothingEnabled = false;
  407. var w = canvas.width;
  408. var h = canvas.height;
  409. // 【重要】默认转化的格式为png,也可设置为其他格式
  410. var img = Canvas2Image.convertToJPEG(canvas, w, h, 'jpeg');
  411. var imgData = $(img).attr('src');
  412. var doc = new jsPDF("p", "mm", "a4");
  413. // |
  414. // |—————————————————————————————|
  415. // A0 841×1189
  416. // A1 594×841
  417. // A2 420×594
  418. // A3 297×420
  419. // A4 210×297
  420. // A5 148×210
  421. // A6 105×148
  422. // A7 74×105
  423. // A8 52×74
  424. // A9 37×52
  425. // A10 26×37
  426. // |——|———————————————————————————|
  427. // |——|——|
  428. // | |
  429. doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  430. doc.save('sq12345.pdf');
  431. });
  432. }
  433. //导出pdf未处理清晰度
  434. function convert2pdf1() {
  435. // 将 id 为 content 的 div 渲染成 canvas
  436. html2canvas(document.getElementById("main"), {
  437. // 渲染完成时调用,获得 canvas
  438. onrendered: function(canvas) {
  439. // 从 canvas 提取图片数据
  440. var imgData = canvas.toDataURL('image/jpeg');
  441. var doc = new jsPDF("p", "mm", "a4");
  442. // |
  443. // |—————————————————————————————|
  444. // A0 841×1189
  445. // A1 594×841
  446. // A2 420×594
  447. // A3 297×420
  448. // A4 210×297
  449. // A5 148×210
  450. // A6 105×148
  451. // A7 74×105
  452. // A8 52×74
  453. // A9 37×52
  454. // A10 26×37
  455. // |——|———————————————————————————|
  456. // |——|——|
  457. // | |
  458. doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  459. doc.save('sq12345.pdf');
  460. }
  461. });
  462. }
  463. function preview(oper) {
  464. //debugger;
  465. if(oper < 5) {
  466. bdhtml = window.document.body.innerHTML; //获取当前页的html代码
  467. sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
  468. eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
  469. prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
  470. print.portrait = true; //纵向打印
  471. prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
  472. window.document.body.innerHTML = prnhtml;
  473. window.print();
  474. window.document.body.innerHTML = bdhtml;
  475. } else {
  476. window.print();
  477. }
  478. }
  479. GetData();
  480. function GetData() {
  481. var date = new Date;
  482. var year = date.getFullYear();
  483. var month = date.getMonth() + 1;
  484. var strDate = date.getDate();
  485. month = (month <= 9 ? "0" + month : month);
  486. strDate = (strDate <= 9 ? "0" + strDate : strDate)
  487. var mydate = (year.toString() + '年' + month.toString() + '月' + strDate.toString() + '日');
  488. $(".Data").text(mydate);
  489. }
  490. </script>
  491. </body>
  492. </html>