@lambo-design/shared 1.0.0-beta.237 → 1.0.0-beta.239

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/config/config.js +51 -51
  2. package/config/env.js +4 -4
  3. package/config/index.js +7 -7
  4. package/config/themes/atrovirens/atrovirens.css +575 -575
  5. package/config/themes/atrovirens/atrovirens.less +667 -667
  6. package/config/themes/atrovirens/var.less +674 -674
  7. package/config/themes/blue/blue.css +575 -575
  8. package/config/themes/blue/blue.less +669 -669
  9. package/config/themes/blue/var.less +677 -677
  10. package/config/themes/blue-white/blue-white.css +575 -575
  11. package/config/themes/blue-white/blue-white.less +669 -669
  12. package/config/themes/blue-white/var.less +676 -676
  13. package/config/themes/blue-white-tight/blue-white-tight.css +576 -576
  14. package/config/themes/blue-white-tight/blue-white-tight.less +672 -672
  15. package/config/themes/blue-white-tight/var.less +677 -677
  16. package/config/themes/danqing/danqing.css +576 -575
  17. package/config/themes/danqing/danqing.css.map +1 -1
  18. package/config/themes/danqing/danqing.less +668 -668
  19. package/config/themes/danqing/danqing.wxss +572 -572
  20. package/config/themes/danqing/var.less +679 -679
  21. package/config/themes/deep/deep.css +575 -575
  22. package/config/themes/deep/deep.less +669 -669
  23. package/config/themes/deep/var.less +677 -677
  24. package/config/themes/default/default.css +575 -575
  25. package/config/themes/default/default.less +671 -671
  26. package/config/themes/default/var.less +677 -677
  27. package/config/themes/eap/eap.css +575 -575
  28. package/config/themes/eap/eap.less +671 -671
  29. package/config/themes/eap/var.less +677 -677
  30. package/config/themes/gold/gold.css +575 -575
  31. package/config/themes/gold/gold.less +671 -671
  32. package/config/themes/gold/var.less +677 -677
  33. package/config/themes/index.js +28 -28
  34. package/config/themes/lime/lime.css +575 -575
  35. package/config/themes/lime/lime.less +671 -671
  36. package/config/themes/lime/var.less +678 -678
  37. package/config/themes/orange/orange.css +575 -575
  38. package/config/themes/orange/orange.less +671 -671
  39. package/config/themes/orange/var.less +678 -678
  40. package/config/themes/red/red.css +575 -575
  41. package/config/themes/red/red.less +671 -671
  42. package/config/themes/red/var.less +677 -677
  43. package/config/themes/theme-atrovirens.js +558 -558
  44. package/config/themes/theme-blue.js +558 -558
  45. package/config/themes/theme-bw.js +558 -558
  46. package/config/themes/theme-bwt.js +559 -559
  47. package/config/themes/theme-danqing.js +558 -558
  48. package/config/themes/theme-deep.js +558 -558
  49. package/config/themes/theme-default.js +558 -558
  50. package/config/themes/theme-eap.js +558 -558
  51. package/config/themes/theme-gold.js +558 -558
  52. package/config/themes/theme-lime.js +558 -558
  53. package/config/themes/theme-orange.js +559 -559
  54. package/config/themes/theme-red.js +558 -558
  55. package/config/themes/theme-white.js +557 -557
  56. package/config/themes/white/var.less +675 -675
  57. package/config/themes/white/white.css +575 -575
  58. package/config/themes/white/white.less +668 -668
  59. package/directives/index.js +23 -23
  60. package/directives/module/draggable.js +56 -56
  61. package/directives/module/permission.js +49 -49
  62. package/directives/module/print.js +1 -1
  63. package/directives/module/vue-print-nb/README.md +63 -63
  64. package/directives/module/vue-print-nb/print.js +94 -94
  65. package/directives/module/vue-print-nb/printarea.js +532 -532
  66. package/index.js +10 -10
  67. package/nstyles/common.less +197 -197
  68. package/nstyles/components/404.less +46 -46
  69. package/nstyles/components/button.less +34 -34
  70. package/nstyles/components/date-picker.less +37 -37
  71. package/nstyles/components/drawer.less +20 -20
  72. package/nstyles/components/dropdown.less +18 -18
  73. package/nstyles/components/excel-flow.less +72 -72
  74. package/nstyles/components/form.less +313 -303
  75. package/nstyles/components/index.less +23 -23
  76. package/nstyles/components/layout/collect.less +10 -10
  77. package/nstyles/components/layout/detail-view.less +107 -107
  78. package/nstyles/components/layout/full-screen.less +7 -7
  79. package/nstyles/components/layout/index.less +7 -7
  80. package/nstyles/components/layout/other-menu.less +142 -142
  81. package/nstyles/components/layout/page-view.less +101 -101
  82. package/nstyles/components/layout/sider-trigger.less +41 -41
  83. package/nstyles/components/layout/tags-nav.less +113 -113
  84. package/nstyles/components/modal.less +85 -85
  85. package/nstyles/components/n-button.less +131 -131
  86. package/nstyles/components/n-image-preview.less +131 -131
  87. package/nstyles/components/n-model/index.less +19 -19
  88. package/nstyles/components/n-model/report-index.less +43 -43
  89. package/nstyles/components/n-panel.less +40 -40
  90. package/nstyles/components/n-picker.less +37 -37
  91. package/nstyles/components/n-sign.less +17 -17
  92. package/nstyles/components/n-tooltip.less +10 -10
  93. package/nstyles/components/panel.less +31 -31
  94. package/nstyles/components/select.less +3 -3
  95. package/nstyles/components/sign.less +27 -27
  96. package/nstyles/components/table.less +315 -315
  97. package/nstyles/components/tree.less +158 -158
  98. package/nstyles/components/upload.less +164 -164
  99. package/nstyles/index.less +5 -5
  100. package/nstyles/reset.less +65 -65
  101. package/nstyles/third/ag.less +174 -174
  102. package/nstyles/third/index.less +11 -11
  103. package/nstyles/third/view-design.less +366 -366
  104. package/nstyles/variables/base.less +143 -143
  105. package/nstyles/variables/index.less +4 -4
  106. package/nstyles/variables/theme/default/button.less +7 -7
  107. package/nstyles/variables/theme/default/common.less +57 -57
  108. package/nstyles/variables/theme/default/index.less +7 -7
  109. package/nstyles/variables/theme/default/layout.less +40 -40
  110. package/nstyles/variables/theme/default/table.less +37 -37
  111. package/nstyles/variables/theme/default/tag.less +3 -3
  112. package/nstyles/variables/theme/default/upload.less +3 -3
  113. package/nstyles/variables/theme/index.less +13 -13
  114. package/nstyles/variables/theme/small/button.less +7 -7
  115. package/nstyles/variables/theme/small/common.less +39 -39
  116. package/nstyles/variables/theme/small/index.less +5 -5
  117. package/nstyles/variables/theme/small/layout.less +21 -21
  118. package/nstyles/variables/theme/small/table.less +17 -17
  119. package/nstyles/variables/theme/small/tag.less +3 -3
  120. package/package.json +1 -1
  121. package/plugin/index.js +12 -12
  122. package/plugin/module/date-format.js +30 -30
  123. package/plugin/module/loading.js +26 -26
  124. package/plugin/module/warn-handler.js +11 -11
  125. package/styles/variables.less +21 -21
  126. package/utils/ajax/cacheconf.js +19 -19
  127. package/utils/ajax/content-type.js +30 -30
  128. package/utils/ajax/index.js +12 -12
  129. package/utils/ajax/interceptors.js +97 -97
  130. package/utils/assist.js +147 -147
  131. package/utils/base64.js +126 -126
  132. package/utils/blob.js +47 -47
  133. package/utils/bus.js +3 -3
  134. package/utils/crypto/index.js +48 -48
  135. package/utils/crypto/md5.js +152 -152
  136. package/utils/crypto/sm3.js +235 -235
  137. package/utils/date.js +381 -381
  138. package/utils/dict/built-in-dict.js +20 -20
  139. package/utils/dict/index.js +167 -167
  140. package/utils/dom.js +38 -38
  141. package/utils/event.js +72 -72
  142. package/utils/excel.js +655 -655
  143. package/utils/file.js +19 -19
  144. package/utils/form/validate.js +29 -29
  145. package/utils/half-year.js +68 -68
  146. package/utils/index.js +41 -41
  147. package/utils/json.js +29 -29
  148. package/utils/lodop.js +165 -165
  149. package/utils/menu/before-close.js +17 -17
  150. package/utils/menu/index.js +395 -395
  151. package/utils/mime_type.js +67 -67
  152. package/utils/modelerUtil.js +227 -227
  153. package/utils/n/api.js +22 -22
  154. package/utils/n/date.js +57 -57
  155. package/utils/n/index.js +9 -9
  156. package/utils/n/is-type.js +176 -176
  157. package/utils/n/number.js +144 -144
  158. package/utils/n/permission-cache.js +11 -11
  159. package/utils/n/reuqest/axiosN.js +17 -17
  160. package/utils/n/reuqest/content-type.js +19 -19
  161. package/utils/n/reuqest/interceptors.js +95 -95
  162. package/utils/n/reuqest/url-params.js +12 -12
  163. package/utils/n/storage.js +51 -51
  164. package/utils/n/token.js +51 -51
  165. package/utils/n/user-cache.js +11 -11
  166. package/utils/n/user.js +34 -34
  167. package/utils/n/uuid.js +16 -16
  168. package/utils/n-generator-routers.js +208 -208
  169. package/utils/n-router.js +205 -205
  170. package/utils/n-theme.js +30 -30
  171. package/utils/number.js +180 -180
  172. package/utils/oss.js +57 -57
  173. package/utils/platform.js +1334 -1334
  174. package/utils/quarter.js +58 -58
  175. package/utils/storage.js +198 -198
  176. package/utils/theme.js +138 -138
  177. package/utils/transform.js +179 -0
  178. package/utils/type.js +102 -102
  179. package/utils/util.js +795 -795
  180. package/utils/validator.js +181 -181
  181. package/utils/vxetable/index.js +25 -25
  182. package/utils/zoomScroll.js +9 -9
package/directives/module/vue-print-nb/printarea.js CHANGED
@@ -1,532 +1,532 @@
1
- const isIE = () => {
2
- if (!!window.ActiveXobject || 'ActiveXObject' in window) {
3
- return true
4
- } else {
5
- return false
6
- }
7
- }
8
- /**
9
- * 判断是否是IE11
10
- * @returns boolean
11
- */
12
- const isIE11 = () => {
13
- if (/Trident\/7\./.test(navigator.userAgent)) {
14
- return true
15
- } else {
16
- return false
17
- }
18
- }
19
- const isRemove = (dom) => {
20
- if (isIE() || isIE11()) {
21
- dom.removeNode(true)
22
- } else {
23
- dom.remove()
24
- }
25
- return dom
26
- }
27
- export default class {
28
- constructor(option) {
29
- this.standards = {
30
- strict: 'strict',
31
- loose: 'loose',
32
- html5: 'html5',
33
- }
34
- this.previewBody = null
35
- this.close = null
36
- this.previewBodyUtilPrintBtn = null
37
- this.selectArray = [] // 存储select的
38
- this.counter = 0
39
- this.settings = {
40
- standard: this.standards.html5,
41
- ignoreClass: '', // 不需要打印内容的class
42
- }
43
- Object.assign(this.settings, option)
44
- this.init()
45
- }
46
- init() {
47
- console.log(this.settings)
48
- this.counter++
49
- this.settings.id = `printArea_${this.counter}`
50
- let url = ''
51
- if (this.settings.url && !this.settings.asyncUrl) {
52
- url = this.settings.url
53
- }
54
- let _this = this
55
- // 如果是异步的
56
- if (this.settings.asyncUrl) {
57
- _this.settings.asyncUrl(function (url) {
58
- let PrintAreaWindow = _this.getPrintWindow(url) // 创建iframe
59
- if (_this.settings.preview) {
60
- // 打开预览弹窗
61
- _this.previewIfrmaeLoad()
62
- } else {
63
- // 直接打印
64
- _this.print(PrintAreaWindow)
65
- }
66
- }, _this.settings.vue)
67
- return
68
- }
69
- let PrintAreaWindow = this.getPrintWindow(url) // 创建iframe
70
-
71
- if (!this.settings.url) {
72
- this.write(PrintAreaWindow.doc) // 写入内容
73
- }
74
-
75
- if (this.settings.preview) {
76
- // 打开预览弹窗
77
- this.previewIfrmaeLoad()
78
- } else {
79
- // 直接打印
80
- this.print(PrintAreaWindow)
81
- }
82
- }
83
- addEvent(element, type, callback) {
84
- if (element.addEventListener) {
85
- element.addEventListener(type, callback, false)
86
- } else if (element.attachEvent) {
87
- element.attachEvent('on' + type, callback)
88
- } else {
89
- element['on' + type] = callback
90
- }
91
- }
92
- previewIfrmaeLoad() {
93
- let box = document.getElementById('vue-pirnt-nb-previewBox')
94
-
95
- if (box) {
96
- let _this = this
97
- let iframe = box.querySelector('iframe')
98
- this.settings.previewBeforeOpenCallback()
99
- this.addEvent(iframe, 'load', function () {
100
- _this.previewBoxShow()
101
- _this.removeCanvasImg()
102
- _this.settings.previewOpenCallback()
103
- })
104
-
105
- this.addEvent(box.querySelector('.previewBodyUtilPrintBtn'), 'click', function () {
106
- _this.settings.beforeOpenCallback()
107
- _this.settings.openCallback()
108
- iframe.contentWindow.print()
109
- _this.settings.closeCallback()
110
- })
111
- }
112
- }
113
- // 删除所有canva转换的图片
114
- removeCanvasImg() {
115
- let _this = this
116
- try {
117
- if (_this.elsdom) {
118
- // 删除canva转变图片的dom节点
119
- let canvasList = _this.elsdom.querySelectorAll('.canvasImg')
120
- for (let i = 0; i < canvasList.length; i++) {
121
- isRemove(canvasList[i])
122
- }
123
- }
124
- } catch (e) {
125
- console.log(e)
126
- }
127
- }
128
- print(ifrmae) {
129
- var _this = this
130
- let iframe = document.getElementById(this.settings.id) || ifrmae.f
131
- let iframeWin =
132
- document.getElementById(this.settings.id).contentWindow || ifrmae.f.contentWindow
133
- var _loaded = function () {
134
- iframeWin.focus()
135
- _this.settings.openCallback()
136
- iframeWin.print()
137
- isRemove(iframe)
138
- _this.settings.closeCallback()
139
- _this.removeCanvasImg()
140
- }
141
- _this.settings.beforeOpenCallback()
142
- _this.addEvent(iframe, 'load', function () {
143
- _loaded()
144
- })
145
- }
146
- write(PADocument) {
147
- PADocument.open()
148
- PADocument.write(
149
- `${this.docType()}<html style="height:600px">${this.getHead()}${this.getBody()}</html>`,
150
- )
151
- PADocument.close()
152
- }
153
- docType() {
154
- if (this.settings.standard === this.standards.html5) {
155
- return '<!DOCTYPE html>'
156
- }
157
- var transitional = this.settings.standard === this.standards.loose ? ' Transitional' : ''
158
- var dtd = this.settings.standard === this.standards.loose ? 'loose' : 'strict'
159
-
160
- return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01${transitional}//EN" "http://www.w3.org/TR/html4/${dtd}.dtd">`
161
- }
162
- getHead() {
163
- let extraHead = ''
164
- let links = ''
165
- let style = ''
166
- if (this.settings.extraHead) {
167
- this.settings.extraHead.replace(/([^,]+)/g, (m) => {
168
- extraHead += m
169
- })
170
- }
171
- // 复制所有link标签
172
- ;[].forEach.call(document.querySelectorAll('link'), function (item) {
173
- if (item.href.indexOf('.css') >= 0) {
174
- links += `<link type="text/css" rel="stylesheet" href="${item.href}" >`
175
- }
176
- })
177
- // 循环获取style标签的样式
178
- let domStyle = document.styleSheets
179
- if (domStyle && domStyle.length > 0) {
180
- for (let i = 0; i < domStyle.length; i++) {
181
- try {
182
- if (domStyle[i].cssRules || domStyle[i].rules) {
183
- let rules = domStyle[i].cssRules || domStyle[i].rules
184
- for (let b = 0; b < rules.length; b++) {
185
- style += rules[b].cssText
186
- }
187
- }
188
- } catch (e) {
189
- console.log(domStyle[i].href + e)
190
- }
191
- }
192
- }
193
-
194
- if (this.settings.extraCss) {
195
- this.settings.extraCss.replace(/([^,\s]+)/g, (m) => {
196
- links += `<link type="text/css" rel="stylesheet" href="${m}">`
197
- })
198
- }
199
-
200
- return `<head><title>${this.settings.popTitle}</title>${extraHead}${links}<style type="text/css">${style}</style></head>`
201
- }
202
-
203
- getBody() {
204
- let ids = this.settings.ids
205
- ids = ids.replace(new RegExp('#', 'g'), '')
206
- this.elsdom = this.beforeHanler(document.getElementById(ids))
207
- let ele = this.getFormData(this.elsdom)
208
- ele = this.ignoreText(ele)
209
- ele = this.handleTableStyle(ele)
210
-
211
- let htm = ele.outerHTML
212
- if (this.settings.fontFamily && this.settings.fontFamily != '') {
213
- return `<body style="font-family:${this.settings.fontFamily}">` + htm + `</body>`
214
- } else {
215
- return `<body>` + htm + `</body>`
216
- }
217
- }
218
- // 设置忽视元素
219
- ignoreText(ele) {
220
- const copy = ele.cloneNode(true)
221
- console.log(this.settings.ignoreClass)
222
- const ignoreNodes = copy.querySelectorAll('.' + this.settings.ignoreClass)
223
-
224
- console.log(ignoreNodes)
225
- const nodes = copy.childNodes
226
- const reducer = (el, data, ignoreNode) => {
227
- for (let i = 0; i < data.length; i++) {
228
- const item = data[i]
229
- if (item == ignoreNode) {
230
- el.removeChild(ignoreNode)
231
- break
232
- } else if (item.childNodes && item.childNodes.length) {
233
- reducer(item, item.childNodes, ignoreNode)
234
- }
235
- }
236
- }
237
- if (ignoreNodes && ignoreNodes.length) {
238
- for (let i = 0; i < ignoreNodes.length; i++) {
239
- const ignoreNode = ignoreNodes[i]
240
- reducer(copy, nodes, ignoreNode)
241
- }
242
- }
243
- return copy
244
- }
245
- // 设置el-table样式
246
- handleTableStyle(ele) {
247
- const copy = ele.cloneNode(true)
248
- const tableNodes = copy.querySelectorAll('.ivu-table-header table,.ivu-table-body table')
249
- /*** 这里先注释,有需要的可以按照这个例子自己自定义 */
250
- const tableBorderNodes = copy.querySelectorAll('.ivu-table-border')
251
- const thBorderNodes = copy.querySelectorAll('.ivu-table-border th, .ivu-table-border td')
252
- const pageBottom = copy.querySelectorAll('.page-bottom')
253
-
254
- // 给页尾增加内容
255
- for (let i = 0; i < pageBottom.length; i++) {
256
- // const element = pageBottom[i];
257
- // element.style.width = '100%'
258
- // element.style.position = 'absolute'
259
- // element.style.bottom = '0px'
260
- // element.style.display = 'flex'
261
- // element.style.flexDirection = 'row'
262
- // element.style.justifyContent = 'spaceBetween'
263
- // element.style.marginTop = '100px'
264
- }
265
- // // 给表格添加下边框和右边框(根据自己的打印预览样式修改,不同电脑显示的效果不一样)
266
- for (let i = 0; i < tableBorderNodes.length; i++) {
267
- const element = tableBorderNodes[i]
268
- element.style.border = 'none'
269
- element.style.border = '1px solid black'
270
- }
271
- // // 给表格th添加边框
272
- for (let i = 0; i < thBorderNodes.length; i++) {
273
- const element = thBorderNodes[i]
274
- element.style.borderRight = '1px solid black'
275
- element.style.borderBottom = '1px solid black'
276
- }
277
- /**------------------------------- */
278
- // 处理宽度
279
- for (let i = 0; i < tableNodes.length; i++) {
280
- const tableItem = tableNodes[i]
281
- tableItem.style.width = '100%' // 将宽度设置为百分比
282
- const child = tableItem.childNodes
283
- for (let j = 0; j < child.length; j++) {
284
- const element = child[j]
285
- if (element.localName === 'colgroup') {
286
- // 去除默认的表格宽度设置
287
- const colElement = element.childNodes
288
- for (let l = 0; l < colElement.length; l++) {
289
- const col = colElement[l]
290
- if (col.localName === 'col') {
291
- let colWidth = parseFloat(col.getAttribute('width'))
292
- colWidth = parseInt((colWidth * 100) / 595)
293
- col.setAttribute('width', colWidth)
294
- }
295
- }
296
- }
297
- }
298
- }
299
- return copy
300
- }
301
- // 处理canva转成图片
302
- beforeHanler(elsdom) {
303
- let canvasList = elsdom.querySelectorAll('canvas')
304
- // canvas转换png图片
305
- for (let i = 0; i < canvasList.length; i++) {
306
- if (!canvasList[i].style.display) {
307
- let _parent = canvasList[i].parentNode
308
- let _canvasUrl = canvasList[i].toDataURL('image/png')
309
- let _img = new Image()
310
- _img.className = 'canvasImg'
311
- _img.style.display = 'none'
312
- _img.src = _canvasUrl
313
- _parent.appendChild(_img)
314
- }
315
- }
316
- return elsdom
317
- }
318
- // 根据type去处理form表单
319
- getFormData(ele) {
320
- let copy = ele.cloneNode(true)
321
- let copiedInputs = copy.querySelectorAll('input,select,textarea')
322
- let canvasImgList = copy.querySelectorAll('.canvasImg,canvas')
323
- let selectCount = -1
324
- // 处理所有canvas
325
- for (let i = 0; i < canvasImgList.length; i++) {
326
- let _parent = canvasImgList[i].parentNode
327
- let item = canvasImgList[i]
328
- // 删除克隆后的canvas节点
329
- if (item.tagName.toLowerCase() === 'canvas') {
330
- _parent.removeChild(item)
331
- } else {
332
- item.style.display = 'block'
333
- }
334
- }
335
- // 处理所有输入框
336
- for (let i = 0; i < copiedInputs.length; i++) {
337
- let item = copiedInputs[i]
338
- let typeInput = item.getAttribute('type')
339
- let copiedInput = copiedInputs[i]
340
- // 获取select标签
341
- if (!typeInput) {
342
- typeInput =
343
- item.tagName === 'SELECT' ? 'select' : item.tagName === 'TEXTAREA' ? 'textarea' : ''
344
- }
345
- // 处理input框
346
- if (item.tagName === 'INPUT') {
347
- // 除了单选框 多选框比较特别
348
- if (typeInput === 'radio' || typeInput === 'checkbox') {
349
- if (item.checked) {
350
- copiedInput.setAttribute('checked', item.checked)
351
- }
352
- } else {
353
- copiedInput.value = item.value
354
- copiedInput.setAttribute('value', item.value)
355
- }
356
- // 处理select
357
- } else if (typeInput === 'select') {
358
- selectCount++
359
- for (let b = 0; b < ele.querySelectorAll('select').length; b++) {
360
- let select = ele.querySelectorAll('select')[b] // 获取原始层每一个select
361
- !select.getAttribute('newbs') && select.setAttribute('newbs', b) // 添加标识
362
- if (select.getAttribute('newbs') == selectCount) {
363
- let opSelectedIndex = ele.querySelectorAll('select')[selectCount].selectedIndex
364
- item.options[opSelectedIndex].setAttribute('selected', true)
365
- }
366
- }
367
- // 处理textarea
368
- } else {
369
- copiedInput.innerHTML = item.value
370
- copiedInput.setAttribute('html', item.value)
371
- }
372
- }
373
-
374
- return copy
375
- }
376
- getPrintWindow(url) {
377
- var f = this.Iframe(url)
378
- return {
379
- f: f,
380
- win: f.contentWindow || f,
381
- doc: f.doc,
382
- }
383
- }
384
- previewBoxShow() {
385
- let box = document.getElementById('vue-pirnt-nb-previewBox')
386
- if (box) {
387
- document.querySelector('html').setAttribute('style', 'overflow: hidden')
388
- box.style.display = 'block'
389
- }
390
- }
391
-
392
- previewBoxHide() {
393
- let box = document.getElementById('vue-pirnt-nb-previewBox')
394
- if (box) {
395
- document.querySelector('html').setAttribute('style', 'overflow: visible;')
396
-
397
- box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
398
- box.style.display = 'none'
399
- }
400
- }
401
- previewBox() {
402
- let box = document.getElementById('vue-pirnt-nb-previewBox')
403
- let previewBodyClass = 'previewBody'
404
- if (box) {
405
- box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
406
- return {
407
- close: box.querySelector('.previewClose'),
408
- previewBody: box.querySelector(`.${previewBodyClass}`),
409
- }
410
- }
411
- let previewContent = document.createElement('div')
412
- previewContent.setAttribute('id', 'vue-pirnt-nb-previewBox')
413
- previewContent.setAttribute(
414
- 'style',
415
- 'position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: white;display:none',
416
- )
417
- previewContent.style.zIndex = this.settings.zIndex
418
- // 打印预览弹窗的header
419
- let previewHeader = document.createElement('div')
420
- previewHeader.setAttribute('class', 'previewHeader')
421
- previewHeader.setAttribute('style', 'padding: 5px 20px;')
422
- previewHeader.innerHTML = this.settings.previewTitle
423
- previewContent.appendChild(previewHeader)
424
- // close关闭按钮
425
- this.close = document.createElement('div')
426
- let close = this.close
427
- close.setAttribute('class', 'previewClose')
428
- close.setAttribute(
429
- 'style',
430
- 'position: absolute;top: 5px;right: 20px;width: 25px;height: 20px;cursor: pointer;',
431
- )
432
- let closeBefore = document.createElement('div')
433
- let closeAfter = document.createElement('div')
434
- closeBefore.setAttribute('class', 'closeBefore')
435
- closeBefore.setAttribute(
436
- 'style',
437
- 'position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(45deg); top: 0px;left: 50%;',
438
- )
439
- closeAfter.setAttribute('class', 'closeAfter')
440
- closeAfter.setAttribute(
441
- 'style',
442
- 'position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(-45deg); top: 0px;left: 50%;',
443
- )
444
- close.appendChild(closeBefore)
445
- close.appendChild(closeAfter)
446
- previewHeader.appendChild(close)
447
-
448
- // 打印预览弹窗的body
449
- this.previewBody = document.createElement('div')
450
- let previewBody = this.previewBody
451
- previewBody.setAttribute('class', previewBodyClass)
452
- previewBody.setAttribute('style', 'display: flex;flex-direction: column; height: 100%;')
453
- previewContent.appendChild(previewBody)
454
- // 打印预览弹窗的body的工具栏
455
- let previewBodyUtil = document.createElement('div')
456
- previewBodyUtil.setAttribute('class', 'previewBodyUtil')
457
- previewBodyUtil.setAttribute('style', 'height: 32px;background: #474747;position: relative;')
458
- previewBody.appendChild(previewBodyUtil)
459
- // 打印的按钮
460
- this.previewBodyUtilPrintBtn = document.createElement('div')
461
- let previewBodyUtilPrintBtn = this.previewBodyUtilPrintBtn
462
- previewBodyUtilPrintBtn.setAttribute('class', 'previewBodyUtilPrintBtn')
463
- previewBodyUtilPrintBtn.innerHTML = this.settings.previewPrintBtnLabel
464
- previewBodyUtilPrintBtn.setAttribute(
465
- 'style',
466
- 'position: absolute;padding: 2px 10px;margin-top: 3px;left: 24px;font-size: 14px;color: white;cursor: pointer;background-color: rgba(0,0,0,.12);background-image: linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,100%,0));background-clip: padding-box;border: 1px solid rgba(0,0,0,.35);border-color: rgba(0,0,0,.32) rgba(0,0,0,.38) rgba(0,0,0,.42);box-shadow: inset 0 1px 0 hsla(0,0%,100%,.05), inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 0 hsla(0,0%,100%,.05);',
467
- )
468
- previewBodyUtil.appendChild(previewBodyUtilPrintBtn)
469
-
470
- // 添加整个预览到body
471
- document.body.appendChild(previewContent)
472
-
473
- return {
474
- close: this.close,
475
- previewBody: this.previewBody,
476
- }
477
- }
478
- iframeBox(frameId, url) {
479
- let iframe = document.createElement('iframe')
480
- iframe.style.border = '0px'
481
- iframe.style.position = 'absolute'
482
- iframe.style.width = '0px'
483
- iframe.style.height = '0px'
484
- iframe.style.right = '0px'
485
- iframe.style.top = '0px'
486
- iframe.setAttribute('id', frameId)
487
- iframe.setAttribute('src', url)
488
-
489
- return iframe
490
- }
491
- Iframe(url) {
492
- let frameId = this.settings.id
493
- // 局部打印 用当前的时间做ifrmae的url
494
- url = !url ? new Date().getTime() : url
495
- let _this = this
496
-
497
- let iframe = this.iframeBox(frameId, url)
498
-
499
- // let that = this
500
- try {
501
- // 直接打印 不预览
502
- if (!this.settings.preview) {
503
- document.body.appendChild(iframe)
504
- } else {
505
- iframe.setAttribute('style', 'border: 0px;flex: 1;')
506
- // 预览打印
507
- let previewBox = this.previewBox()
508
- let previewBody = previewBox.previewBody
509
- let close = previewBox.close
510
- // 添加ifrmae到预览弹窗
511
- previewBody.appendChild(iframe)
512
- this.addEvent(close, 'click', function () {
513
- _this.previewBoxHide()
514
- })
515
- }
516
-
517
- iframe.doc = null
518
- iframe.doc = iframe.contentDocument
519
- ? iframe.contentDocument
520
- : iframe.contentWindow
521
- ? iframe.contentWindow.document
522
- : iframe.document
523
- } catch (e) {
524
- throw new Error(e + '. iframes may not be supported in this browser.')
525
- }
526
- if (iframe.doc == null) {
527
- throw new Error('Cannot find document.')
528
- }
529
-
530
- return iframe
531
- }
532
- }
1
+ const isIE = () => {
2
+ if (!!window.ActiveXobject || 'ActiveXObject' in window) {
3
+ return true
4
+ } else {
5
+ return false
6
+ }
7
+ }
8
+ /**
9
+ * 判断是否是IE11
10
+ * @returns boolean
11
+ */
12
+ const isIE11 = () => {
13
+ if (/Trident\/7\./.test(navigator.userAgent)) {
14
+ return true
15
+ } else {
16
+ return false
17
+ }
18
+ }
19
+ const isRemove = (dom) => {
20
+ if (isIE() || isIE11()) {
21
+ dom.removeNode(true)
22
+ } else {
23
+ dom.remove()
24
+ }
25
+ return dom
26
+ }
27
+ export default class {
28
+ constructor(option) {
29
+ this.standards = {
30
+ strict: 'strict',
31
+ loose: 'loose',
32
+ html5: 'html5',
33
+ }
34
+ this.previewBody = null
35
+ this.close = null
36
+ this.previewBodyUtilPrintBtn = null
37
+ this.selectArray = [] // 存储select的
38
+ this.counter = 0
39
+ this.settings = {
40
+ standard: this.standards.html5,
41
+ ignoreClass: '', // 不需要打印内容的class
42
+ }
43
+ Object.assign(this.settings, option)
44
+ this.init()
45
+ }
46
+ init() {
47
+ console.log(this.settings)
48
+ this.counter++
49
+ this.settings.id = `printArea_${this.counter}`
50
+ let url = ''
51
+ if (this.settings.url && !this.settings.asyncUrl) {
52
+ url = this.settings.url
53
+ }
54
+ let _this = this
55
+ // 如果是异步的
56
+ if (this.settings.asyncUrl) {
57
+ _this.settings.asyncUrl(function (url) {
58
+ let PrintAreaWindow = _this.getPrintWindow(url) // 创建iframe
59
+ if (_this.settings.preview) {
60
+ // 打开预览弹窗
61
+ _this.previewIfrmaeLoad()
62
+ } else {
63
+ // 直接打印
64
+ _this.print(PrintAreaWindow)
65
+ }
66
+ }, _this.settings.vue)
67
+ return
68
+ }
69
+ let PrintAreaWindow = this.getPrintWindow(url) // 创建iframe
70
+
71
+ if (!this.settings.url) {
72
+ this.write(PrintAreaWindow.doc) // 写入内容
73
+ }
74
+
75
+ if (this.settings.preview) {
76
+ // 打开预览弹窗
77
+ this.previewIfrmaeLoad()
78
+ } else {
79
+ // 直接打印
80
+ this.print(PrintAreaWindow)
81
+ }
82
+ }
83
+ addEvent(element, type, callback) {
84
+ if (element.addEventListener) {
85
+ element.addEventListener(type, callback, false)
86
+ } else if (element.attachEvent) {
87
+ element.attachEvent('on' + type, callback)
88
+ } else {
89
+ element['on' + type] = callback
90
+ }
91
+ }
92
+ previewIfrmaeLoad() {
93
+ let box = document.getElementById('vue-pirnt-nb-previewBox')
94
+
95
+ if (box) {
96
+ let _this = this
97
+ let iframe = box.querySelector('iframe')
98
+ this.settings.previewBeforeOpenCallback()
99
+ this.addEvent(iframe, 'load', function () {
100
+ _this.previewBoxShow()
101
+ _this.removeCanvasImg()
102
+ _this.settings.previewOpenCallback()
103
+ })
104
+
105
+ this.addEvent(box.querySelector('.previewBodyUtilPrintBtn'), 'click', function () {
106
+ _this.settings.beforeOpenCallback()
107
+ _this.settings.openCallback()
108
+ iframe.contentWindow.print()
109
+ _this.settings.closeCallback()
110
+ })
111
+ }
112
+ }
113
+ // 删除所有canva转换的图片
114
+ removeCanvasImg() {
115
+ let _this = this
116
+ try {
117
+ if (_this.elsdom) {
118
+ // 删除canva转变图片的dom节点
119
+ let canvasList = _this.elsdom.querySelectorAll('.canvasImg')
120
+ for (let i = 0; i < canvasList.length; i++) {
121
+ isRemove(canvasList[i])
122
+ }
123
+ }
124
+ } catch (e) {
125
+ console.log(e)
126
+ }
127
+ }
128
+ print(ifrmae) {
129
+ var _this = this
130
+ let iframe = document.getElementById(this.settings.id) || ifrmae.f
131
+ let iframeWin =
132
+ document.getElementById(this.settings.id).contentWindow || ifrmae.f.contentWindow
133
+ var _loaded = function () {
134
+ iframeWin.focus()
135
+ _this.settings.openCallback()
136
+ iframeWin.print()
137
+ isRemove(iframe)
138
+ _this.settings.closeCallback()
139
+ _this.removeCanvasImg()
140
+ }
141
+ _this.settings.beforeOpenCallback()
142
+ _this.addEvent(iframe, 'load', function () {
143
+ _loaded()
144
+ })
145
+ }
146
+ write(PADocument) {
147
+ PADocument.open()
148
+ PADocument.write(
149
+ `${this.docType()}<html style="height:600px">${this.getHead()}${this.getBody()}</html>`,
150
+ )
151
+ PADocument.close()
152
+ }
153
+ docType() {
154
+ if (this.settings.standard === this.standards.html5) {
155
+ return '<!DOCTYPE html>'
156
+ }
157
+ var transitional = this.settings.standard === this.standards.loose ? ' Transitional' : ''
158
+ var dtd = this.settings.standard === this.standards.loose ? 'loose' : 'strict'
159
+
160
+ return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01${transitional}//EN" "http://www.w3.org/TR/html4/${dtd}.dtd">`
161
+ }
162
+ getHead() {
163
+ let extraHead = ''
164
+ let links = ''
165
+ let style = ''
166
+ if (this.settings.extraHead) {
167
+ this.settings.extraHead.replace(/([^,]+)/g, (m) => {
168
+ extraHead += m
169
+ })
170
+ }
171
+ // 复制所有link标签
172
+ ;[].forEach.call(document.querySelectorAll('link'), function (item) {
173
+ if (item.href.indexOf('.css') >= 0) {
174
+ links += `<link type="text/css" rel="stylesheet" href="${item.href}" >`
175
+ }
176
+ })
177
+ // 循环获取style标签的样式
178
+ let domStyle = document.styleSheets
179
+ if (domStyle && domStyle.length > 0) {
180
+ for (let i = 0; i < domStyle.length; i++) {
181
+ try {
182
+ if (domStyle[i].cssRules || domStyle[i].rules) {
183
+ let rules = domStyle[i].cssRules || domStyle[i].rules
184
+ for (let b = 0; b < rules.length; b++) {
185
+ style += rules[b].cssText
186
+ }
187
+ }
188
+ } catch (e) {
189
+ console.log(domStyle[i].href + e)
190
+ }
191
+ }
192
+ }
193
+
194
+ if (this.settings.extraCss) {
195
+ this.settings.extraCss.replace(/([^,\s]+)/g, (m) => {
196
+ links += `<link type="text/css" rel="stylesheet" href="${m}">`
197
+ })
198
+ }
199
+
200
+ return `<head><title>${this.settings.popTitle}</title>${extraHead}${links}<style type="text/css">${style}</style></head>`
201
+ }
202
+
203
+ getBody() {
204
+ let ids = this.settings.ids
205
+ ids = ids.replace(new RegExp('#', 'g'), '')
206
+ this.elsdom = this.beforeHanler(document.getElementById(ids))
207
+ let ele = this.getFormData(this.elsdom)
208
+ ele = this.ignoreText(ele)
209
+ ele = this.handleTableStyle(ele)
210
+
211
+ let htm = ele.outerHTML
212
+ if (this.settings.fontFamily && this.settings.fontFamily != '') {
213
+ return `<body style="font-family:${this.settings.fontFamily}">` + htm + `</body>`
214
+ } else {
215
+ return `<body>` + htm + `</body>`
216
+ }
217
+ }
218
+ // 设置忽视元素
219
+ ignoreText(ele) {
220
+ const copy = ele.cloneNode(true)
221
+ console.log(this.settings.ignoreClass)
222
+ const ignoreNodes = copy.querySelectorAll('.' + this.settings.ignoreClass)
223
+
224
+ console.log(ignoreNodes)
225
+ const nodes = copy.childNodes
226
+ const reducer = (el, data, ignoreNode) => {
227
+ for (let i = 0; i < data.length; i++) {
228
+ const item = data[i]
229
+ if (item == ignoreNode) {
230
+ el.removeChild(ignoreNode)
231
+ break
232
+ } else if (item.childNodes && item.childNodes.length) {
233
+ reducer(item, item.childNodes, ignoreNode)
234
+ }
235
+ }
236
+ }
237
+ if (ignoreNodes && ignoreNodes.length) {
238
+ for (let i = 0; i < ignoreNodes.length; i++) {
239
+ const ignoreNode = ignoreNodes[i]
240
+ reducer(copy, nodes, ignoreNode)
241
+ }
242
+ }
243
+ return copy
244
+ }
245
+ // 设置el-table样式
246
+ handleTableStyle(ele) {
247
+ const copy = ele.cloneNode(true)
248
+ const tableNodes = copy.querySelectorAll('.ivu-table-header table,.ivu-table-body table')
249
+ /*** 这里先注释,有需要的可以按照这个例子自己自定义 */
250
+ const tableBorderNodes = copy.querySelectorAll('.ivu-table-border')
251
+ const thBorderNodes = copy.querySelectorAll('.ivu-table-border th, .ivu-table-border td')
252
+ const pageBottom = copy.querySelectorAll('.page-bottom')
253
+
254
+ // 给页尾增加内容
255
+ for (let i = 0; i < pageBottom.length; i++) {
256
+ // const element = pageBottom[i];
257
+ // element.style.width = '100%'
258
+ // element.style.position = 'absolute'
259
+ // element.style.bottom = '0px'
260
+ // element.style.display = 'flex'
261
+ // element.style.flexDirection = 'row'
262
+ // element.style.justifyContent = 'spaceBetween'
263
+ // element.style.marginTop = '100px'
264
+ }
265
+ // // 给表格添加下边框和右边框(根据自己的打印预览样式修改,不同电脑显示的效果不一样)
266
+ for (let i = 0; i < tableBorderNodes.length; i++) {
267
+ const element = tableBorderNodes[i]
268
+ element.style.border = 'none'
269
+ element.style.border = '1px solid black'
270
+ }
271
+ // // 给表格th添加边框
272
+ for (let i = 0; i < thBorderNodes.length; i++) {
273
+ const element = thBorderNodes[i]
274
+ element.style.borderRight = '1px solid black'
275
+ element.style.borderBottom = '1px solid black'
276
+ }
277
+ /**------------------------------- */
278
+ // 处理宽度
279
+ for (let i = 0; i < tableNodes.length; i++) {
280
+ const tableItem = tableNodes[i]
281
+ tableItem.style.width = '100%' // 将宽度设置为百分比
282
+ const child = tableItem.childNodes
283
+ for (let j = 0; j < child.length; j++) {
284
+ const element = child[j]
285
+ if (element.localName === 'colgroup') {
286
+ // 去除默认的表格宽度设置
287
+ const colElement = element.childNodes
288
+ for (let l = 0; l < colElement.length; l++) {
289
+ const col = colElement[l]
290
+ if (col.localName === 'col') {
291
+ let colWidth = parseFloat(col.getAttribute('width'))
292
+ colWidth = parseInt((colWidth * 100) / 595)
293
+ col.setAttribute('width', colWidth)
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
299
+ return copy
300
+ }
301
+ // 处理canva转成图片
302
+ beforeHanler(elsdom) {
303
+ let canvasList = elsdom.querySelectorAll('canvas')
304
+ // canvas转换png图片
305
+ for (let i = 0; i < canvasList.length; i++) {
306
+ if (!canvasList[i].style.display) {
307
+ let _parent = canvasList[i].parentNode
308
+ let _canvasUrl = canvasList[i].toDataURL('image/png')
309
+ let _img = new Image()
310
+ _img.className = 'canvasImg'
311
+ _img.style.display = 'none'
312
+ _img.src = _canvasUrl
313
+ _parent.appendChild(_img)
314
+ }
315
+ }
316
+ return elsdom
317
+ }
318
+ // 根据type去处理form表单
319
+ getFormData(ele) {
320
+ let copy = ele.cloneNode(true)
321
+ let copiedInputs = copy.querySelectorAll('input,select,textarea')
322
+ let canvasImgList = copy.querySelectorAll('.canvasImg,canvas')
323
+ let selectCount = -1
324
+ // 处理所有canvas
325
+ for (let i = 0; i < canvasImgList.length; i++) {
326
+ let _parent = canvasImgList[i].parentNode
327
+ let item = canvasImgList[i]
328
+ // 删除克隆后的canvas节点
329
+ if (item.tagName.toLowerCase() === 'canvas') {
330
+ _parent.removeChild(item)
331
+ } else {
332
+ item.style.display = 'block'
333
+ }
334
+ }
335
+ // 处理所有输入框
336
+ for (let i = 0; i < copiedInputs.length; i++) {
337
+ let item = copiedInputs[i]
338
+ let typeInput = item.getAttribute('type')
339
+ let copiedInput = copiedInputs[i]
340
+ // 获取select标签
341
+ if (!typeInput) {
342
+ typeInput =
343
+ item.tagName === 'SELECT' ? 'select' : item.tagName === 'TEXTAREA' ? 'textarea' : ''
344
+ }
345
+ // 处理input框
346
+ if (item.tagName === 'INPUT') {
347
+ // 除了单选框 多选框比较特别
348
+ if (typeInput === 'radio' || typeInput === 'checkbox') {
349
+ if (item.checked) {
350
+ copiedInput.setAttribute('checked', item.checked)
351
+ }
352
+ } else {
353
+ copiedInput.value = item.value
354
+ copiedInput.setAttribute('value', item.value)
355
+ }
356
+ // 处理select
357
+ } else if (typeInput === 'select') {
358
+ selectCount++
359
+ for (let b = 0; b < ele.querySelectorAll('select').length; b++) {
360
+ let select = ele.querySelectorAll('select')[b] // 获取原始层每一个select
361
+ !select.getAttribute('newbs') && select.setAttribute('newbs', b) // 添加标识
362
+ if (select.getAttribute('newbs') == selectCount) {
363
+ let opSelectedIndex = ele.querySelectorAll('select')[selectCount].selectedIndex
364
+ item.options[opSelectedIndex].setAttribute('selected', true)
365
+ }
366
+ }
367
+ // 处理textarea
368
+ } else {
369
+ copiedInput.innerHTML = item.value
370
+ copiedInput.setAttribute('html', item.value)
371
+ }
372
+ }
373
+
374
+ return copy
375
+ }
376
+ getPrintWindow(url) {
377
+ var f = this.Iframe(url)
378
+ return {
379
+ f: f,
380
+ win: f.contentWindow || f,
381
+ doc: f.doc,
382
+ }
383
+ }
384
+ previewBoxShow() {
385
+ let box = document.getElementById('vue-pirnt-nb-previewBox')
386
+ if (box) {
387
+ document.querySelector('html').setAttribute('style', 'overflow: hidden')
388
+ box.style.display = 'block'
389
+ }
390
+ }
391
+
392
+ previewBoxHide() {
393
+ let box = document.getElementById('vue-pirnt-nb-previewBox')
394
+ if (box) {
395
+ document.querySelector('html').setAttribute('style', 'overflow: visible;')
396
+
397
+ box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
398
+ box.style.display = 'none'
399
+ }
400
+ }
401
+ previewBox() {
402
+ let box = document.getElementById('vue-pirnt-nb-previewBox')
403
+ let previewBodyClass = 'previewBody'
404
+ if (box) {
405
+ box.querySelector('iframe') && isRemove(box.querySelector('iframe'))
406
+ return {
407
+ close: box.querySelector('.previewClose'),
408
+ previewBody: box.querySelector(`.${previewBodyClass}`),
409
+ }
410
+ }
411
+ let previewContent = document.createElement('div')
412
+ previewContent.setAttribute('id', 'vue-pirnt-nb-previewBox')
413
+ previewContent.setAttribute(
414
+ 'style',
415
+ 'position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: white;display:none',
416
+ )
417
+ previewContent.style.zIndex = this.settings.zIndex
418
+ // 打印预览弹窗的header
419
+ let previewHeader = document.createElement('div')
420
+ previewHeader.setAttribute('class', 'previewHeader')
421
+ previewHeader.setAttribute('style', 'padding: 5px 20px;')
422
+ previewHeader.innerHTML = this.settings.previewTitle
423
+ previewContent.appendChild(previewHeader)
424
+ // close关闭按钮
425
+ this.close = document.createElement('div')
426
+ let close = this.close
427
+ close.setAttribute('class', 'previewClose')
428
+ close.setAttribute(
429
+ 'style',
430
+ 'position: absolute;top: 5px;right: 20px;width: 25px;height: 20px;cursor: pointer;',
431
+ )
432
+ let closeBefore = document.createElement('div')
433
+ let closeAfter = document.createElement('div')
434
+ closeBefore.setAttribute('class', 'closeBefore')
435
+ closeBefore.setAttribute(
436
+ 'style',
437
+ 'position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(45deg); top: 0px;left: 50%;',
438
+ )
439
+ closeAfter.setAttribute('class', 'closeAfter')
440
+ closeAfter.setAttribute(
441
+ 'style',
442
+ 'position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(-45deg); top: 0px;left: 50%;',
443
+ )
444
+ close.appendChild(closeBefore)
445
+ close.appendChild(closeAfter)
446
+ previewHeader.appendChild(close)
447
+
448
+ // 打印预览弹窗的body
449
+ this.previewBody = document.createElement('div')
450
+ let previewBody = this.previewBody
451
+ previewBody.setAttribute('class', previewBodyClass)
452
+ previewBody.setAttribute('style', 'display: flex;flex-direction: column; height: 100%;')
453
+ previewContent.appendChild(previewBody)
454
+ // 打印预览弹窗的body的工具栏
455
+ let previewBodyUtil = document.createElement('div')
456
+ previewBodyUtil.setAttribute('class', 'previewBodyUtil')
457
+ previewBodyUtil.setAttribute('style', 'height: 32px;background: #474747;position: relative;')
458
+ previewBody.appendChild(previewBodyUtil)
459
+ // 打印的按钮
460
+ this.previewBodyUtilPrintBtn = document.createElement('div')
461
+ let previewBodyUtilPrintBtn = this.previewBodyUtilPrintBtn
462
+ previewBodyUtilPrintBtn.setAttribute('class', 'previewBodyUtilPrintBtn')
463
+ previewBodyUtilPrintBtn.innerHTML = this.settings.previewPrintBtnLabel
464
+ previewBodyUtilPrintBtn.setAttribute(
465
+ 'style',
466
+ 'position: absolute;padding: 2px 10px;margin-top: 3px;left: 24px;font-size: 14px;color: white;cursor: pointer;background-color: rgba(0,0,0,.12);background-image: linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,100%,0));background-clip: padding-box;border: 1px solid rgba(0,0,0,.35);border-color: rgba(0,0,0,.32) rgba(0,0,0,.38) rgba(0,0,0,.42);box-shadow: inset 0 1px 0 hsla(0,0%,100%,.05), inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 0 hsla(0,0%,100%,.05);',
467
+ )
468
+ previewBodyUtil.appendChild(previewBodyUtilPrintBtn)
469
+
470
+ // 添加整个预览到body
471
+ document.body.appendChild(previewContent)
472
+
473
+ return {
474
+ close: this.close,
475
+ previewBody: this.previewBody,
476
+ }
477
+ }
478
+ iframeBox(frameId, url) {
479
+ let iframe = document.createElement('iframe')
480
+ iframe.style.border = '0px'
481
+ iframe.style.position = 'absolute'
482
+ iframe.style.width = '0px'
483
+ iframe.style.height = '0px'
484
+ iframe.style.right = '0px'
485
+ iframe.style.top = '0px'
486
+ iframe.setAttribute('id', frameId)
487
+ iframe.setAttribute('src', url)
488
+
489
+ return iframe
490
+ }
491
+ Iframe(url) {
492
+ let frameId = this.settings.id
493
+ // 局部打印 用当前的时间做ifrmae的url
494
+ url = !url ? new Date().getTime() : url
495
+ let _this = this
496
+
497
+ let iframe = this.iframeBox(frameId, url)
498
+
499
+ // let that = this
500
+ try {
501
+ // 直接打印 不预览
502
+ if (!this.settings.preview) {
503
+ document.body.appendChild(iframe)
504
+ } else {
505
+ iframe.setAttribute('style', 'border: 0px;flex: 1;')
506
+ // 预览打印
507
+ let previewBox = this.previewBox()
508
+ let previewBody = previewBox.previewBody
509
+ let close = previewBox.close
510
+ // 添加ifrmae到预览弹窗
511
+ previewBody.appendChild(iframe)
512
+ this.addEvent(close, 'click', function () {
513
+ _this.previewBoxHide()
514
+ })
515
+ }
516
+
517
+ iframe.doc = null
518
+ iframe.doc = iframe.contentDocument
519
+ ? iframe.contentDocument
520
+ : iframe.contentWindow
521
+ ? iframe.contentWindow.document
522
+ : iframe.document
523
+ } catch (e) {
524
+ throw new Error(e + '. iframes may not be supported in this browser.')
525
+ }
526
+ if (iframe.doc == null) {
527
+ throw new Error('Cannot find document.')
528
+ }
529
+
530
+ return iframe
531
+ }
532
+ }