濮阳12345web

PrintPreview-1.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  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">签收时间
  192. </td>
  193. <td width="98px">
  194. <span class="QSHJ"></span>
  195. </td>
  196. </tr>
  197. <tr style="min-height: 49px;">
  198. <td>
  199. 办理时限
  200. </td>
  201. <td>
  202. <span class="BLSX"></span>
  203. </td>
  204. </tr>
  205. <tr style="min-height: 49px;">
  206. <td>
  207. 投诉人
  208. </td>
  209. <td>
  210. <span class="gdbh"></span>
  211. </td>
  212. <td>
  213. 联系电话
  214. </td>
  215. <td>
  216. <span class="lxdh"></span>
  217. </td>
  218. <td>
  219. 秘密等级
  220. </td>
  221. <td>
  222. <span class="MJ"></span>
  223. </td>
  224. </tr>
  225. <tr style="min-height: 49px;">
  226. <td>
  227. 地址
  228. </td>
  229. <td class="printdz" colspan="5">
  230. <span class="mmdj"></span>
  231. </td>
  232. </tr>
  233. <tr style="height: 200px;">
  234. <td class="style1">内容<br/>摘要
  235. </td>
  236. <td class="printnr" colspan="5">
  237. <span class="lxr"></span>
  238. </td>
  239. </tr>
  240. <tr style="height: 130px;">
  241. <td>
  242. <span>调度<br/>意见</span>
  243. </td>
  244. <td class="printdd" colspan="5">
  245. <span class="jbyj"></span>
  246. </td>
  247. </tr>
  248. <tr style="height: 130px;">
  249. <td>
  250. <span>承办<br/>意见</span>
  251. </td>
  252. <td class="printcb" colspan="5">
  253. <span class="cbyj"></span>
  254. </td>
  255. </tr>
  256. <tr style="height: 130px;">
  257. <td>
  258. <span>单位领导批示</span>
  259. </td>
  260. <td class="printldps" colspan="5">
  261. <span class="ldps"></span>
  262. </td>
  263. </tr>
  264. <tr style="height: 130px;">
  265. <td>
  266. 单位处理结果
  267. </td>
  268. <td class="printcljg" colspan="5">
  269. <span class="bljg"></span>
  270. </td>
  271. </tr>
  272. </tbody>
  273. </table>
  274. </div>
  275. <!--endprint1-->
  276. <div class="alignC">
  277. <input type="button" value="导出PDF" class="btn" id="btn-html2canvas" />
  278. <input type="button" value="打印" class="btn" onclick="preview(1)" />
  279. </div>
  280. <script src="../js/plugins/html2pdf/jspdf.debug.js"></script>
  281. <script src="../js/plugins/html2pdf/html2canvas.js"></script>
  282. <script src="../js/plugins/html2pdf/canvas2image.js"></script>
  283. <script type="text/javascript">
  284. var wid = helper.request.queryString("wid");
  285. $(document).ready(function() {
  286. if(wid) {
  287. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', {
  288. workorderid: wid,
  289. "token": $.cookie("token")
  290. }, function(result) {
  291. if(result.state.toLowerCase() == "success") {
  292. var content = result.data;
  293. //console.log( content);
  294. $(".gdbhs").text(content.data[0].F_WorkOrderId); //工单
  295. $(".tsfs").text(content.data[0].SourceName);
  296. $(".lxr").text(content.data[0].F_CusName); //内容摘要
  297. $('.lxdh').text(content.data[0].F_CusPhone); //联系电话
  298. //$('.dz').text(content.data[0].F_CusAddress);
  299. //$('.lxrphone').text(content.data[0].F_ConPhone);
  300. $(".lxr ").text(content.data[0].F_ComContent); //内容
  301. var T = content.data[0].F_CreateTime; //受理时间
  302. if(T) {
  303. var S = T.substring(0, T.indexOf(' '));
  304. $('.tssj').text(S);
  305. }
  306. if(content.jbdata.length > 0) {
  307. var qst = content.jbdata[content.jbdata.length - 1].F_SureTime; //签收时间
  308. if(qst) {
  309. var qs = qst.substring(0, qst.indexOf(' '));
  310. $('.QSHJ').text(qs);
  311. }
  312. var qst0 = content.jbdata[content.jbdata.length - 1].F_LimitTime; //办理时限
  313. if(qst0) {
  314. var qs0 = qst0.substring(0, qst0.indexOf(' '));
  315. $('.BLSX').html(qs0);
  316. }
  317. }
  318. $(".gdbh").text(content.data[0].F_CusName); //投诉人
  319. $(".mmdj").text(content.data[0].F_SourceAddress); //地址
  320. $(".tslx").text(content.data[0].TypeName1); //偶投诉类型
  321. // 6 || 7 || 9显示办理结果
  322. if(content.data[0].F_WorkState == '6' || content.data[0].F_WorkState == '7' || content.data[0].F_WorkState == '9') {
  323. $(".bljg").text(content.data[0].F_Result); //单位处理结果
  324. }
  325. //密级程度
  326. if(content.data[0].F_IsProtect == 0) {
  327. $('.MJ').text("普通");
  328. } else {
  329. $('.MJ').text("保密");
  330. }
  331. // if (content.data[0].F_Result) {
  332. // var rt = content.data[0].F_Result.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />");
  333. // $(".cljg").html(rt);
  334. // }
  335. // else {
  336. // $(".cljg").html("");
  337. // }
  338. //单位领导批示
  339. //var n=content.psdata.length;
  340. //if (n > 0) {
  341. // var ldps = content.psdata[n - 1].F_SuperOpinion;
  342. // //if (ldps) { ldps = ldps.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />"); }
  343. // $(".ldps").html(ldps);
  344. //}
  345. //调度意见
  346. var m = content.jbdata.length;
  347. if(m > 0) {
  348. $('.cbdw').text(content.jbdata[m - 1].DeptName); //主办单位
  349. if(content.jbdata[m - 1].OtherDeptName) {
  350. $('#xbdws').show();
  351. $('.xbdw').text(content.jbdata[m - 1].OtherDeptName); //协办单位
  352. } else {
  353. $('#xbdws').hide();
  354. }
  355. var jbyjs = content.jbdata[m - 1].F_AssignedOpinion;
  356. if(jbyjs) {
  357. jbyjs = jbyjs.replace(/[ ]/g, "&nbsp;").replace(/\ +/g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />");
  358. $(".jbyj").html(jbyjs);
  359. } else {
  360. $(".jbyj").html("");
  361. }
  362. }
  363. }
  364. })
  365. }
  366. //导出pdf点击事件
  367. document.getElementById("btn-html2canvas").onclick = convert2pdf;
  368. })
  369. //导出pdf处理过清晰度
  370. function convert2pdf() {
  371. var cntElem = $('#main')[0];
  372. var shareContent = cntElem; //需要截图的包裹的(原生的)DOM 对象
  373. var width = shareContent.offsetWidth; //获取dom 宽度
  374. var height = shareContent.offsetHeight; //获取dom 高度
  375. var canvas = document.createElement("canvas"); //创建一个canvas节点
  376. var scale = 2; //定义任意放大倍数 支持小数
  377. canvas.width = width * scale; //定义canvas 宽度 * 缩放
  378. canvas.height = height * scale; //定义canvas高度 *缩放
  379. canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
  380. var opts = {
  381. scale: scale, // 添加的scale 参数
  382. canvas: canvas, //自定义 canvas
  383. // logging: true, //日志开关,便于查看html2canvas的内部执行流程
  384. width: width, //dom 原始宽度
  385. height: height,
  386. useCORS: true // 【重要】开启跨域配置
  387. };
  388. html2canvas(shareContent, opts).then(function(canvas) {
  389. var context = canvas.getContext('2d');
  390. // 【重要】关闭抗锯齿
  391. context.mozImageSmoothingEnabled = false;
  392. context.webkitImageSmoothingEnabled = false;
  393. context.msImageSmoothingEnabled = false;
  394. context.imageSmoothingEnabled = false;
  395. var w = canvas.width;
  396. var h = canvas.height;
  397. // 【重要】默认转化的格式为png,也可设置为其他格式
  398. var img = Canvas2Image.convertToJPEG(canvas, w, h, 'jpeg');
  399. var imgData = $(img).attr('src');
  400. var doc = new jsPDF("p", "mm", "a4");
  401. // |
  402. // |—————————————————————————————|
  403. // A0 841×1189
  404. // A1 594×841
  405. // A2 420×594
  406. // A3 297×420
  407. // A4 210×297
  408. // A5 148×210
  409. // A6 105×148
  410. // A7 74×105
  411. // A8 52×74
  412. // A9 37×52
  413. // A10 26×37
  414. // |——|———————————————————————————|
  415. // |——|——|
  416. // | |
  417. doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  418. doc.save('sq12345.pdf');
  419. });
  420. }
  421. //导出pdf未处理清晰度
  422. function convert2pdf1() {
  423. // 将 id 为 content 的 div 渲染成 canvas
  424. html2canvas(document.getElementById("main"), {
  425. // 渲染完成时调用,获得 canvas
  426. onrendered: function(canvas) {
  427. // 从 canvas 提取图片数据
  428. var imgData = canvas.toDataURL('image/jpeg');
  429. var doc = new jsPDF("p", "mm", "a4");
  430. // |
  431. // |—————————————————————————————|
  432. // A0 841×1189
  433. // A1 594×841
  434. // A2 420×594
  435. // A3 297×420
  436. // A4 210×297
  437. // A5 148×210
  438. // A6 105×148
  439. // A7 74×105
  440. // A8 52×74
  441. // A9 37×52
  442. // A10 26×37
  443. // |——|———————————————————————————|
  444. // |——|——|
  445. // | |
  446. doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);
  447. doc.save('sq12345.pdf');
  448. }
  449. });
  450. }
  451. function preview(oper) {
  452. //debugger;
  453. if(oper < 5) {
  454. bdhtml = window.document.body.innerHTML; //获取当前页的html代码
  455. sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
  456. eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
  457. prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
  458. print.portrait = true; //纵向打印
  459. prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
  460. window.document.body.innerHTML = prnhtml;
  461. window.print();
  462. window.document.body.innerHTML = bdhtml;
  463. } else {
  464. window.print();
  465. }
  466. }
  467. GetData();
  468. function GetData() {
  469. var date = new Date;
  470. var year = date.getFullYear();
  471. var month = date.getMonth() + 1;
  472. var strDate = date.getDate();
  473. month = (month <= 9 ? "0" + month : month);
  474. strDate = (strDate <= 9 ? "0" + strDate : strDate)
  475. var mydate = (year.toString() + '年' + month.toString() + '月' + strDate.toString() + '日');
  476. $(".Data").text(mydate);
  477. }
  478. </script>
  479. </body>
  480. </html>