Нет описания

PrintPreview-1.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  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. <style>
  12. #main {
  13. width: 100%;
  14. /*margin: 0 auto;*/
  15. -webkit-box-shadow: 1px 1px 9px 2px #D2D2D2;
  16. box-shadow: 1px 1px 9px 2px #D2D2D2;
  17. background-color: #fff;
  18. padding: 30px 60px 80px 60px;
  19. }
  20. .alignC {
  21. text-align: center;
  22. }
  23. .headerAlign .titleh2 {
  24. width: 100%;
  25. font-family: "宋体";
  26. font-weight: bold;
  27. font-size: 32pt;
  28. letter-spacing: -1px;
  29. line-height: 80px;
  30. }
  31. .headerAlign .titleh3 {
  32. font-size: 18px;
  33. }
  34. .headerAlign .titleCenter {
  35. font-family: "宋体";
  36. font-weight: bold;
  37. font-size: 22pt;
  38. letter-spacing: -1px;
  39. line-height: 40px;
  40. }
  41. .headerAlign .textCb {
  42. position: absolute;
  43. padding: 5px 12px;
  44. right: 32px;
  45. top: 30px;
  46. font-size: 16px;
  47. color: #e84545;
  48. border: 1px solid #e84545;
  49. display: none;
  50. }
  51. .caseTit {
  52. line-height: 40px;
  53. font-size: 16px;
  54. text-indent: 2rem;
  55. }
  56. .gdbhs {}
  57. #main table {
  58. margin: 0 auto;
  59. width: 100%;
  60. border-collapse: collapse;
  61. font-size: 13pt;
  62. font-family: "仿宋";
  63. }
  64. tbody td {
  65. min-width: 10%;
  66. padding: 6px 0 6px 0;
  67. }
  68. .btn {
  69. margin-top: 4px;
  70. margin-bottom: 4px;
  71. background: #00a1cb;
  72. color: #fff;
  73. }
  74. .lxr,
  75. .mmdj,
  76. .jbyj,
  77. .cbyj,
  78. .ldps,
  79. .bljg {
  80. white-space: normal;
  81. word-break: break-all;
  82. }
  83. .jbyj {
  84. width: 558px;
  85. display: inline-block;
  86. }
  87. .printdz {
  88. text-align: left;
  89. text-indent: .3em;
  90. padding: 4px;
  91. }
  92. .printdd {
  93. text-align: justify;
  94. padding: 4px 2px 4px 4px;
  95. }
  96. .printnr,
  97. .printcb,
  98. .printldps,
  99. .printcljg {
  100. text-align: justify;
  101. padding: 4px;
  102. text-indent: 2em;
  103. }
  104. #inputs {
  105. width: 0;
  106. height: 0;
  107. }
  108. </style>
  109. <style media="print">
  110. /*设置打印样式 标题宋体加黑二号*/
  111. .headerAlign h2 {
  112. font-family: "宋体" !important;
  113. font-weight: bold !important;
  114. font-size: 22pt !important;
  115. letter-spacing: -1px !important;
  116. }
  117. .textCb {
  118. color: #e84545 !important;
  119. }
  120. .headerAlign h3 div:nth-of-type(1) {
  121. font-size: 14pt !important;
  122. font-family: "宋体" !important;
  123. font-weight: normal !important;
  124. margin-left: 98px !important;
  125. }
  126. .headerAlign h3 {
  127. width: 690px !important;
  128. }
  129. .headerAlign .titleh2 {
  130. font-family: "宋体";
  131. font-weight: bold;
  132. font-size: 32pt;
  133. letter-spacing: -1px;
  134. line-height: 80px;
  135. }
  136. .headerAlign .titleh3 {
  137. font-size: 18px;
  138. }
  139. .headerAlign .titleCenter {
  140. font-family: "宋体";
  141. font-weight: bold;
  142. font-size: 22pt;
  143. letter-spacing: -1px;
  144. line-height: 40px;
  145. }
  146. #main {
  147. padding: 40px 0 0 0 !important;
  148. }
  149. #main table {
  150. font-size: 13pt !important;
  151. font-family: "仿宋" !important;
  152. border-color: #000;
  153. color: #000;
  154. width: 621px !important;
  155. /*page-break-after:avoid !important;*/
  156. }
  157. tbody td {
  158. padding: 6px 0 6px 0 !important;
  159. }
  160. .printdz {
  161. text-align: left;
  162. text-indent: .3em;
  163. padding: 4px;
  164. }
  165. .printdd {
  166. text-align: justify !important;
  167. padding: 4px 2px 4px 4px !important;
  168. }
  169. .printnr,
  170. .printcb,
  171. .printldps,
  172. .printcljg {
  173. text-align: justify !important;
  174. padding: 4px !important;
  175. text-indent: 2em !important;
  176. }
  177. @page {
  178. size: A4 portrait;
  179. }
  180. #inputs {
  181. width: 0;
  182. height: 0;
  183. }
  184. </style>
  185. </head>
  186. <body>
  187. <div id="main">
  188. <div class="alignC headerAlign">
  189. <div class="titleh2">
  190. 舆情提示函
  191. </div>
  192. <div class="titleh3"><span id="F_WorkOrderId"></span></div>
  193. <!--<span class="textCb">重办</span>-->
  194. </div>
  195. <div class="caseTit">
  196. <div><span class="DeptName"></span></div>
  197. <div>我办监测到以下问题类信息,请尽快妥善处理。</div>
  198. </div>
  199. <table class="alignC" border="1" cellpadding="4" cellspacing="0" bordercolor="#cbcbcb">
  200. <tbody>
  201. <tr style="height: 50px;">
  202. <td style="width: 100px;">舆情来源</td>
  203. <td colspan="2"><span id="F_Event"></span></td>
  204. <td>作者</td>
  205. <td colspan="2"><span id="F_CusName"></span></td>
  206. </tr>
  207. <tr style="height: 50px;">
  208. <td>题目</td>
  209. <td colspan="5"><span id="F_ComTitle"></span></td>
  210. </tr>
  211. <tr style="height: 100px;">
  212. <td>主要网址</td>
  213. <td colspan="5"><span id="F_CusAddress"></span></td>
  214. </tr>
  215. <tr style="height: 100px;">
  216. <td>通知情况</td>
  217. <td colspan="5">通知<span class="DeptName"></span></td>
  218. </tr>
  219. <tr style="height: 200px;">
  220. <td class="style1">内容简介</td>
  221. <td class="printnr" colspan="5">
  222. <span id="F_ComContent"></span>
  223. </td>
  224. </tr>
  225. <tr style="height: 200px;">
  226. <td class="style1">提示</td>
  227. <td class="printnr" colspan="5">
  228. <div class="TipsContent" style="display: none;">
  229. <!-- 接到本提示函后,尽快排查、核实相关情况,并于 -->
  230. <span id="F_LimitTime"></span>
  231. <!--8月21日下午18:00-->
  232. <!-- 前将word电子版和加章签字扫描PDF版通过平台回复。 -->
  233. </div>
  234. </td>
  235. </tr>
  236. <tr style="height: 50px;">
  237. <td>联系人</td>
  238. <td>刘启贤</td>
  239. <td>电话</td>
  240. <td>15036545027</td>
  241. <td>电话</td>
  242. <td>64369555<td>
  243. </tr>
  244. </tbody>
  245. </table>
  246. <div style="display: flex; line-height: 50px; padding: 0 30px; font-size: 16px;">
  247. <div style="text-align: left;width: 50%;">市委网信办</div>
  248. <div style="text-align: right;width: 50%;">日期:
  249. <span id="F_CreateTime"></span>
  250. </div>
  251. </div>
  252. </div>
  253. <!--endprint1-->
  254. <div class="alignC">
  255. <input type="button" value="导出PDF" class="btn" id="btn-html2canvas" />
  256. <input type="button" value="打印" class="btn" onclick="preview(1)" />
  257. </div>
  258. <textarea id="inputs" type="hidden"></textarea>
  259. <script src="../js/plugins/html2pdf/jspdf.debug.js"></script>
  260. <script src="../js/plugins/html2pdf/html2canvas.js"></script>
  261. <script src="../js/plugins/html2pdf/canvas2image.js"></script>
  262. <script src="../js/plugins/html2pdf/FileSaver.js"></script>
  263. <script src="../js/plugins/html2pdf/jquery.wordexport.js"></script>
  264. <script type="text/javascript">
  265. var wid = helper.request.queryString("wid");
  266. var printType = helper.request.queryString("printType");
  267. $(document).ready(function() {
  268. $(".printdd-wrapper").hide()
  269. $(".printcb-wrapper").hide()
  270. if(printType == "DCL") {
  271. $(".printdd-wrapper").hide()
  272. $(".printcb-wrapper").show()
  273. $(".reasonReturn-wrapper").show()
  274. } else {
  275. $(".printdd-wrapper").show()
  276. $(".printcb-wrapper").hide()
  277. $(".reasonReturn-wrapper").hide()
  278. }
  279. if(wid) {
  280. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', {
  281. workorderid: wid,
  282. "token": $.cookie("token")
  283. }, function(result) {
  284. if(result.state.toLowerCase() == "success") {
  285. var data = result.data
  286. var content = result.data.data[0];
  287. content.F_WorkOrderId && $('#F_WorkOrderId').text(content.F_WorkOrderId)
  288. content.F_Event && $('#F_Event').text(content.F_Event)
  289. content.F_CusName && $('#F_CusName').text(content.F_CusName)
  290. content.F_ComTitle && $('#F_ComTitle').text(content.F_ComTitle)
  291. content.deptname && $('.DeptName').text(content.deptname+':')
  292. content.F_CusAddress && $('#F_CusAddress').text(content.F_CusAddress)
  293. content.F_ComContent && $('#F_ComContent').text(content.F_ComContent)
  294. if (content.F_CreateTime) {
  295. var greateTimeSplit = content.F_CreateTime.split(' ')[0].split('-')
  296. var getCreateTime = greateTimeSplit[0]+'年'+greateTimeSplit[1]+'月'+greateTimeSplit[2]+'日'
  297. $('#F_CreateTime').text(getCreateTime)
  298. }
  299. if (data.jbdata.length) {
  300. $(".TipsContent").show()
  301. console.log(data.jbdata)
  302. // 提示信息
  303. $('#F_LimitTime').text(data.jbdata[data.jbdata.length-1].F_AssignedOpinion)
  304. // if (data.jbdata[0].F_LimitTime) {
  305. // var limitTimeSplitOne = data.jbdata[0].F_LimitTime.split(' ')[0].split('-')
  306. // var limitTimeSplitTwo = data.jbdata[0].F_LimitTime.split(' ')[1]
  307. // var getLimitTime = limitTimeSplitOne[0]+'年'+limitTimeSplitOne[1]+'月'+limitTimeSplitOne[2]+'日下午'+limitTimeSplitTwo
  308. // $('#F_LimitTime').text(getLimitTime)
  309. // }
  310. }
  311. }
  312. })
  313. }
  314. $("#btn-html1canvas").on("click", function() {
  315. $("#main").wordExport();
  316. });
  317. $("#btn-html2canvas").on("click", function() {
  318. var pdf = new jsPDF('p', 'mm', 'a4');
  319. var filename = '舆情提示函';
  320. pdf.addHTML($('#main'), function() {
  321. pdf.output("save", filename)
  322. })
  323. });
  324. })
  325. $(".copyBtn").on("click", function() {
  326. var texts = $(this).text();
  327. var inputs = document.getElementById("inputs");
  328. inputs.value = texts; // 修改文本框的内容(赋值内容)
  329. inputs.select(); // 选中文本
  330. document.execCommand("copy"); // 执行浏览器复制命令
  331. layer.msg("复制成功")
  332. });
  333. function preview(oper) {
  334. if(oper < 5) {
  335. bdhtml = window.document.body.innerHTML; //获取当前页的html代码
  336. sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
  337. eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
  338. prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
  339. print.portrait = true; //纵向打印
  340. prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
  341. window.document.body.innerHTML = prnhtml;
  342. window.print();
  343. window.document.body.innerHTML = bdhtml;
  344. // parent.parent.layer.closeAll();
  345. // parent.parent.$('#orderlist').bootstrapTable('refresh');
  346. // parent.parent.layer.msg("操作成功!");
  347. } else {
  348. window.print();
  349. }
  350. }
  351. GetData();
  352. function GetData() {
  353. var date = new Date;
  354. var year = date.getFullYear();
  355. var month = date.getMonth() + 1;
  356. var strDate = date.getDate();
  357. month = (month <= 9 ? "0" + month : month);
  358. strDate = (strDate <= 9 ? "0" + strDate : strDate)
  359. var mydate = (year.toString() + '年' + month.toString() + '月' + strDate.toString() + '日');
  360. $(".Data").text(mydate);
  361. }
  362. </script>
  363. </body>
  364. </html>