printer.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. /**
  2. * 打印模块
  3. * date:2019-04-23 License By http://easyweb.vip
  4. */
  5. layui.define(["jquery"], function (exports) {
  6. var $ = layui.jquery;
  7. var hideClass = 'hide-print'; // 打印时隐藏
  8. var printingClass = 'printing'; // 正在打印
  9. var printer = {
  10. // 打印当前页面
  11. print: function (param) {
  12. window.focus(); // 让当前窗口获取焦点
  13. if (!param) {
  14. param = {};
  15. }
  16. var hide = param.hide; // 需要隐藏的元素
  17. var horizontal = param.horizontal; // 纸张是否是横向
  18. var iePreview = param.iePreview; // 兼容ie打印预览
  19. var close = param.close; // 打印完是否关闭打印窗口
  20. var blank = param.blank; // 是否打开新窗口
  21. // 设置参数默认值
  22. if (iePreview == undefined) {
  23. iePreview = true;
  24. }
  25. if (blank == undefined && window != top && iePreview && printer.isIE()) {
  26. blank = true;
  27. }
  28. // 打印方向控制
  29. $('#page-print-set').remove();
  30. var htmlStr = '<div id="page-print-set">';
  31. htmlStr += ' <style type="text/css" media="print">';
  32. if (horizontal) {
  33. htmlStr += ' @page { size: landscape; }';
  34. } else {
  35. htmlStr += ' @page { size: portrait; }';
  36. }
  37. htmlStr += ' </style>';
  38. // 打印预览兼容ie
  39. if (iePreview && printer.isIE()) {
  40. htmlStr += ' <object id="WebBrowser" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2" width="0" height="0"></object>';
  41. htmlStr += ' <script>WebBrowser.ExecWB(7, 1);';
  42. if (close) {
  43. htmlStr += ' window.close();';
  44. }
  45. htmlStr += ' </script>';
  46. }
  47. htmlStr += ' </div>';
  48. // 打印
  49. printer.hideElem(hide);
  50. // 打印iframe兼容ie
  51. var pWindow, pDocument;
  52. if (blank) {
  53. // 创建打印窗口
  54. pWindow = window.open('', '_blank');
  55. pDocument = pWindow.document;
  56. pWindow.focus(); // 让打印窗口获取焦点
  57. // 写入内容到打印窗口
  58. var htmlOld = document.getElementsByTagName('html')[0].innerHTML;
  59. htmlOld += htmlStr;
  60. pDocument.open();
  61. pDocument.write(htmlOld);
  62. pDocument.close();
  63. } else {
  64. pWindow = window;
  65. $('body').append(htmlStr);
  66. }
  67. (iePreview && printer.isIE()) || pWindow.print();
  68. printer.showElem(hide);
  69. },
  70. // 打印html字符串
  71. printHtml: function (param) {
  72. if (!param) {
  73. param = {};
  74. }
  75. var html = param.html; // 打印的html内容
  76. var blank = param.blank; // 是否打开新窗口
  77. var print = param.print; // 是否自动调用打印
  78. var close = param.close; // 打印完是否关闭打印窗口
  79. var horizontal = param.horizontal; // 纸张是否是横向
  80. var iePreview = param.iePreview; // 兼容ie打印预览
  81. // 设置参数默认值
  82. if (print == undefined) {
  83. print = true;
  84. }
  85. if (iePreview == undefined) {
  86. iePreview = true;
  87. }
  88. if (printer.isIE() && blank == undefined) {
  89. blank = true;
  90. }
  91. if (close == undefined) {
  92. close = true;
  93. if (iePreview && blank && printer.isIE()) {
  94. close = false;
  95. }
  96. }
  97. // 创建打印窗口
  98. var pWindow, pDocument;
  99. if (blank) {
  100. pWindow = window.open('', '_blank');
  101. pDocument = pWindow.document;
  102. } else {
  103. var printFrame = document.getElementById('printFrame');
  104. if (!printFrame) {
  105. $('body').append('<iframe id="printFrame" style="display: none;"></iframe>');
  106. printFrame = document.getElementById('printFrame');
  107. }
  108. pWindow = printFrame.contentWindow;
  109. pDocument = printFrame.contentDocument || printFrame.contentWindow.document;
  110. }
  111. pWindow.focus(); // 让打印窗口获取焦点
  112. // 写入内容到打印窗口
  113. if (html) {
  114. // 加入公共css
  115. html += ('<style>' + printer.getCommonCss(true) + '</style>');
  116. // 打印方向控制
  117. html += '<style type="text/css" media="print">';
  118. if (horizontal) {
  119. html += '@page { size: landscape; }';
  120. } else {
  121. html += '@page { size: portrait; }';
  122. }
  123. html += '</style>';
  124. // 打印预览兼容ie
  125. if (iePreview && printer.isIE()) {
  126. html += '<object id="WebBrowser" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2" width="0" height="0"></object>';
  127. html += '<script>WebBrowser.ExecWB(7, 1);';
  128. if (close) {
  129. html += 'window.close();';
  130. }
  131. html += '</script>';
  132. }
  133. // 写入
  134. pDocument.open();
  135. pDocument.write(html);
  136. pDocument.close();
  137. }
  138. // 打印
  139. if (print) {
  140. (iePreview && printer.isIE()) || pWindow.print();
  141. if (blank && close && (!(iePreview && printer.isIE()))) {
  142. pWindow.close();
  143. }
  144. }
  145. return pWindow;
  146. },
  147. // 分页打印
  148. printPage: function (param) {
  149. if (!param) {
  150. param = {};
  151. }
  152. var htmls = param.htmls; // 打印的内容
  153. var style = param.style; // 打印的样式
  154. var horizontal = param.horizontal; // 纸张是否是横向
  155. var padding = param.padding; // 页边距
  156. var blank = param.blank; // 是否打开新窗口
  157. var print = param.print; // 是否自动调用打印
  158. var close = param.close; // 打印完是否关闭打印窗口
  159. var isDebug = param.debug; // 调试模式
  160. var iePreview = param.iePreview; // 兼容ie打印预览
  161. // 设置参数默认值
  162. if (print == undefined) {
  163. print = true;
  164. }
  165. if (iePreview == undefined) {
  166. iePreview = true;
  167. }
  168. if (printer.isIE() && blank == undefined) {
  169. blank = true;
  170. }
  171. if (close == undefined) {
  172. close = true;
  173. if (iePreview && blank && printer.isIE()) {
  174. close = false;
  175. }
  176. }
  177. if (printer.isEdge() || printer.isFirefox()) {
  178. padding = undefined;
  179. }
  180. // 创建打印窗口
  181. var pWindow, pDocument;
  182. if (blank) {
  183. pWindow = window.open('', '_blank');
  184. pDocument = pWindow.document;
  185. } else {
  186. var printFrame = document.getElementById('printFrame');
  187. if (!printFrame) {
  188. $('body').append('<iframe id="printFrame" style="display: none;"></iframe>');
  189. printFrame = document.getElementById('printFrame');
  190. }
  191. pWindow = printFrame.contentWindow;
  192. pDocument = printFrame.contentDocument || printFrame.contentWindow.document;
  193. }
  194. pWindow.focus(); // 让打印窗口获取焦点
  195. // 拼接打印内容
  196. var htmlStr = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>打印窗口</title>';
  197. style && (htmlStr += style); // 写入自定义css
  198. // 控制分页的css
  199. htmlStr += '<style>';
  200. htmlStr += 'body {';
  201. htmlStr += ' margin: 0 !important;';
  202. htmlStr += '} ';
  203. // 自定义边距竖屏样式
  204. htmlStr += '.print-page .print-page-item {';
  205. htmlStr += ' width: 793px !important;';
  206. htmlStr += ' height: 1122px !important;';
  207. htmlStr += ' padding: ' + (padding ? padding : '55px') + ' !important;';
  208. htmlStr += ' box-sizing: border-box !important;';
  209. htmlStr += ' overflow: hidden !important;';
  210. htmlStr += ' border: none !important;';
  211. htmlStr += '} ';
  212. // 自定义边距横屏样式
  213. htmlStr += '.print-page.page-horizontal .print-page-item {';
  214. htmlStr += ' width: 1122px !important;';
  215. htmlStr += ' height: 792px !important;';
  216. htmlStr += '} ';
  217. // 调试模式样式
  218. htmlStr += '.print-page.page-debug .print-page-item {';
  219. htmlStr += ' border: 1px solid red !important;';
  220. htmlStr += '} ';
  221. // 谷歌默认边距竖屏样式
  222. htmlStr += '.print-page.padding-default .print-page-item {';
  223. htmlStr += ' width: 713px !important;';
  224. htmlStr += ' height: 1042px !important;';
  225. htmlStr += ' padding: 0 !important;';
  226. htmlStr += '} ';
  227. // 谷歌默认边距横屏样式
  228. htmlStr += '.print-page.padding-default.page-horizontal .print-page-item {';
  229. htmlStr += ' width: 1042px !important;';
  230. htmlStr += ' height: 712px !important;';
  231. htmlStr += '} ';
  232. // ie默认边距竖屏样式
  233. htmlStr += '.print-page.padding-default.page-ie .print-page-item {';
  234. htmlStr += ' width: 645px !important;';
  235. htmlStr += ' height: 977px !important;';
  236. htmlStr += '} ';
  237. // ie默认边距横屏样式
  238. htmlStr += '.print-page.padding-default.page-ie.page-horizontal .print-page-item {';
  239. htmlStr += ' width: 978px !important;';
  240. htmlStr += ' height: 648px !important;';
  241. htmlStr += '} ';
  242. // firefox默认边距竖屏样式
  243. htmlStr += '.print-page.padding-default.page-firefox .print-page-item {';
  244. htmlStr += ' width: 720px !important;';
  245. htmlStr += ' height: 955px !important;';
  246. htmlStr += '} ';
  247. // firefox默认边距横屏样式
  248. htmlStr += '.print-page.padding-default.page-firefox.page-horizontal .print-page-item {';
  249. htmlStr += ' width: 955px !important;';
  250. htmlStr += ' height: 720px !important;';
  251. htmlStr += '} ';
  252. htmlStr += printer.getCommonCss(true); // 加入公共css
  253. htmlStr += '</style>';
  254. // 控制打印方向
  255. htmlStr += '<style type="text/css" media="print">';
  256. if (horizontal) {
  257. htmlStr += '@page { size: landscape; }';
  258. } else {
  259. htmlStr += '@page { size: portrait; }';
  260. }
  261. htmlStr += '</style>';
  262. htmlStr += '</head><body>';
  263. // 拼接分页内容
  264. if (htmls && (htmls instanceof Array)) {
  265. var pageClass = horizontal ? ' page-horizontal' : ''; // 横向样式
  266. pageClass += padding == undefined ? ' padding-default' : ''; // 谷歌默认边距
  267. pageClass += isDebug ? ' page-debug' : ''; // 调试模式
  268. if (printer.isIE() || printer.isEdge()) {
  269. pageClass += ' page-ie'; // ie默认边距
  270. } else if (printer.isFirefox()) {
  271. pageClass += ' page-firefox'; // firefox默认边距
  272. }
  273. htmlStr += '<div class="print-page' + pageClass + '">';
  274. for (var i = 0; i < htmls.length; i++) {
  275. htmlStr += '<div class="print-page-item">';
  276. htmlStr += htmls[i];
  277. htmlStr += '</div>';
  278. }
  279. htmlStr += '</div>';
  280. }
  281. // 兼容ie打印预览
  282. if (iePreview && printer.isIE()) {
  283. htmlStr += '<object id="WebBrowser" classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2" width="0" height="0"></object>';
  284. htmlStr += '<script>WebBrowser.ExecWB(7, 1);';
  285. if (close) {
  286. htmlStr += 'window.close();';
  287. }
  288. htmlStr += '</script>';
  289. }
  290. htmlStr += '</body></html>';
  291. // 写入打印内容到打印窗口
  292. pDocument.open();
  293. pDocument.write(htmlStr);
  294. pDocument.close();
  295. // 打印
  296. if (print) {
  297. (iePreview && printer.isIE()) || pWindow.print();
  298. if (blank && close && (!(iePreview && printer.isIE()))) {
  299. pWindow.close();
  300. }
  301. }
  302. return pWindow;
  303. },
  304. // 隐藏元素
  305. hideElem: function (elems) {
  306. $('.' + hideClass).addClass(printingClass);
  307. if (!elems) {
  308. return;
  309. }
  310. if (elems instanceof Array) {
  311. for (var i = 0; i < elems.length; i++) {
  312. $(elems[i]).addClass(printingClass);
  313. }
  314. } else {
  315. $(elems).addClass(printingClass);
  316. }
  317. },
  318. // 取消隐藏
  319. showElem: function (elems) {
  320. $('.' + hideClass).removeClass(printingClass);
  321. if (!elems) {
  322. return;
  323. }
  324. if (elems instanceof Array) {
  325. for (var i = 0; i < elems.length; i++) {
  326. $(elems[i]).removeClass(printingClass);
  327. }
  328. } else {
  329. $(elems).removeClass(printingClass);
  330. }
  331. },
  332. // 打印公共样式
  333. getCommonCss: function (isPrinting) {
  334. var cssStr = ('.' + hideClass + '.' + printingClass + ' {');
  335. cssStr += ' display: none !important;';
  336. cssStr += ' }';
  337. // 表格样式
  338. cssStr += ' .print-table {';
  339. cssStr += ' border: none;';
  340. cssStr += ' border-collapse: collapse;';
  341. cssStr += ' width: 100%;';
  342. cssStr += ' }';
  343. cssStr += ' .print-table td, .print-table th {';
  344. cssStr += ' color: #333;';
  345. cssStr += ' padding: 9px 15px;';
  346. cssStr += ' word-break: break-all;';
  347. cssStr += ' border: 1px solid #666;';
  348. cssStr += ' }';
  349. //
  350. if (isPrinting) {
  351. cssStr += ('.' + hideClass + ' {');
  352. cssStr += ' display: none !important;';
  353. cssStr += '}';
  354. }
  355. return cssStr;
  356. },
  357. // 拼接html
  358. makeHtml: function (param) {
  359. var title = param.title;
  360. var style = param.style;
  361. var body = param.body;
  362. if (title == undefined) {
  363. title = '打印窗口';
  364. }
  365. var htmlStr = '<!DOCTYPE html><html lang="en">';
  366. htmlStr += ' <head><meta charset="UTF-8">';
  367. htmlStr += (' <title>' + title + '</title>');
  368. style && (htmlStr += style);
  369. htmlStr += ' </head>';
  370. htmlStr += ' <body>';
  371. body && (htmlStr += body);
  372. htmlStr += ' </body>';
  373. htmlStr += ' </html>';
  374. return htmlStr;
  375. },
  376. // 判断是否是ie
  377. isIE: function () {
  378. return (!!window.ActiveXObject || "ActiveXObject" in window);
  379. },
  380. // 判断是否是Edge
  381. isEdge: function () {
  382. return navigator.userAgent.indexOf("Edge") != -1;
  383. },
  384. // 判断是否是Firefox
  385. isFirefox: function () {
  386. return navigator.userAgent.indexOf("Firefox") != -1;
  387. }
  388. };
  389. $('head').append('<style>' + printer.getCommonCss() + '</style>');
  390. exports("printer", printer);
  391. });