ztxkui 2.8.9 → 2.9.0

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 (11) hide show
  1. package/dist/DemoCom/PrintDemo.d.ts +1 -0
  2. package/dist/DemoCom/PrintDemo.js +365 -5
  3. package/dist/components/Print/index.d.ts +2 -0
  4. package/dist/components/Print/index.js +2 -0
  5. package/dist/components/Print/print.d.ts +21 -0
  6. package/dist/components/Print/print.js +71 -0
  7. package/dist/components/business/Footer/index.d.ts +3 -2
  8. package/dist/components/business/Footer/index.js +6 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.js +1 -0
  11. package/package.json +3 -1
package/dist/DemoCom/PrintDemo.d.ts CHANGED
@@ -3,5 +3,6 @@
3
3
  * @description
4
4
  */
5
5
  import React from 'react';
6
+ import './style.scss';
6
7
  declare const PrintDemo: React.FC;
7
8
  export default PrintDemo;
package/dist/DemoCom/PrintDemo.js CHANGED
@@ -4,8 +4,11 @@
4
4
  */
5
5
  import React from 'react';
6
6
  // import { findDOMNode } from 'react-dom';
7
- import { Button, ZtIcon } from '../index';
7
+ import { Button, ZtIcon, Print, Footer } from '../index';
8
8
  import Table from 'components/Table';
9
+ import { jsPDF } from 'jspdf';
10
+ import html2canvas from 'html2canvas';
11
+ import './style.scss';
9
12
  var dataSource = new Array(10).fill('1').map(function (item, index) { return ({
10
13
  test1: "\u6D4B\u8BD5\u4E00" + index,
11
14
  test2: "\u6D4B\u8BD5\u4E8C" + index,
@@ -41,7 +44,7 @@ var PrintDemo = function () {
41
44
  },
42
45
  ];
43
46
  return (React.createElement(React.Fragment, null,
44
- React.createElement("div", null,
47
+ React.createElement("div", { className: "" },
45
48
  React.createElement(Button, { onClick: function () {
46
49
  var styleDom = document.createElement('style');
47
50
  styleDom.setAttribute('type', 'text/css');
@@ -49,12 +52,369 @@ var PrintDemo = function () {
49
52
  '@media print{ .test1, .test2 { display: none; } }';
50
53
  document.head.appendChild(styleDom);
51
54
  window.print();
52
- } }, "\u6253\u5370")),
53
- React.createElement("div", { className: "print-container" },
55
+ } }, "\u6253\u5370"),
56
+ React.createElement(Button, { onClick: function () {
57
+ // a4纸的尺寸[595.28, 841.89]
58
+ html2canvas(document.getElementById('test111')).then(function (canvas) {
59
+ console.log(canvas);
60
+ var contentWidth = canvas.width;
61
+ var contentHeight = canvas.height;
62
+ // 一页pdf显示html页面生成的canvas高度
63
+ var pageHeight = (contentWidth / 592.28) * 841.89;
64
+ // 未生成pdf的html页面高度
65
+ var leftHeight = contentHeight;
66
+ // 页面拍内衣
67
+ var position = 0;
68
+ //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
69
+ var imgWidth = 595.28;
70
+ var imgHeight = (592.28 / contentWidth) * contentHeight;
71
+ var pageData = canvas.toDataURL('image/jpeg', 1.0);
72
+ var pdf = new jsPDF(undefined, 'pt', 'a4');
73
+ //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
74
+ //当内容未超过pdf一页显示的范围，无需分页
75
+ if (leftHeight < pageHeight) {
76
+ pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
77
+ }
78
+ else {
79
+ while (leftHeight > 0) {
80
+ pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
81
+ leftHeight -= pageHeight;
82
+ position -= 841.89;
83
+ //避免添加空白页
84
+ if (leftHeight > 0) {
85
+ pdf.addPage();
86
+ }
87
+ }
88
+ }
89
+ pdf.save('新的.pdf');
90
+ });
91
+ } }, "\u8F6Cpdf"),
92
+ React.createElement(Print, { showWater: true })),
93
+ React.createElement("div", { className: "print-container printArea", id: "test111" },
54
94
  React.createElement(ZtIcon, { type: "iconwenjian1" }),
55
95
  React.createElement(Table, { columns: columns, dataSource: dataSource, rowKey: "id" }),
96
+ React.createElement("div", null, "asdasdasdasd"),
97
+ React.createElement("div", null, "asdasdasdasd"),
98
+ React.createElement("div", null, "asdasdasdasd"),
99
+ React.createElement("div", null, "asdasdasdasd"),
100
+ React.createElement("div", null, "asdasdasdasd"),
101
+ React.createElement("div", null, "asdasdasdasd"),
102
+ React.createElement("div", null, "asdasdasdasd"),
103
+ React.createElement("div", null, "asdasdasdasd"),
104
+ React.createElement("div", null, "asdasdasdasd"),
105
+ React.createElement("div", null, "asdasdasdasd"),
106
+ React.createElement("div", null, "asdasdasdasd"),
107
+ React.createElement("div", null, "asdasdasdasd"),
108
+ React.createElement("div", null, "asdasdasdasd"),
109
+ React.createElement("div", null, "asdasdasdasd"),
110
+ React.createElement("div", null, "asdasdasdasd"),
111
+ React.createElement("div", null, "asdasdasdasd"),
112
+ React.createElement("div", null, "asdasdasdasd"),
113
+ React.createElement("div", null, "asdasdasdasd"),
114
+ React.createElement("div", null, "asdasdasdasd"),
115
+ React.createElement("div", null, "asdasdasdasd"),
116
+ React.createElement("div", null, "asdasdasdasd"),
117
+ React.createElement("div", null, "asdasdasdasd"),
118
+ React.createElement("div", null, "asdasdasdasd"),
119
+ React.createElement("div", null, "asdasdasdasd"),
120
+ React.createElement("div", null, "asdasdasdasd"),
121
+ React.createElement("div", null, "asdasdasdasd"),
122
+ React.createElement("div", null, "asdasdasdasd"),
123
+ React.createElement("div", null, "asdasdasdasd"),
124
+ React.createElement("div", null, "asdasdasdasd"),
125
+ React.createElement("div", null, "asdasdasdasd"),
126
+ React.createElement("div", null, "asdasdasdasd"),
127
+ React.createElement("div", null, "asdasdasdasd"),
128
+ React.createElement("div", null, "asdasdasdasd"),
129
+ React.createElement("div", null, "asdasdasdasd"),
130
+ React.createElement("div", null, "asdasdasdasd"),
131
+ React.createElement("div", null, "asdasdasdasd"),
132
+ React.createElement("div", null, "asdasdasdasd"),
133
+ React.createElement("div", null, "asdasdasdasd"),
134
+ React.createElement("div", null, "asdasdasdasd"),
135
+ React.createElement("div", null, "asdasdasdasd"),
136
+ React.createElement("div", null, "asdasdasdasd"),
137
+ React.createElement("div", null, "asdasdasdasd"),
138
+ React.createElement("div", null, "asdasdasdasd"),
139
+ React.createElement("div", null, "asdasdasdasd"),
140
+ React.createElement("div", null, "asdasdasdasd"),
141
+ React.createElement("div", null, "asdasdasdasd"),
142
+ React.createElement("div", null, "asdasdasdasd"),
143
+ React.createElement("div", null, "asdasdasdasd"),
144
+ React.createElement("div", null, "asdasdasdasd"),
145
+ React.createElement("div", null, "asdasdasdasd"),
146
+ React.createElement("div", null, "asdasdasdasd"),
147
+ React.createElement("div", null, "asdasdasdasd"),
148
+ React.createElement("div", null, "asdasdasdasd"),
149
+ React.createElement("div", null, "asdasdasdasd"),
150
+ React.createElement("div", null, "asdasdasdasd"),
151
+ React.createElement("div", null, "asdasdasdasd"),
152
+ React.createElement("div", null, "asdasdasdasd"),
153
+ React.createElement("div", null, "asdasdasdasd"),
154
+ React.createElement("div", null, "asdasdasdasd"),
155
+ React.createElement("div", null, "asdasdasdasd"),
156
+ React.createElement("div", null, "asdasdasdasd"),
157
+ React.createElement("div", null, "asdasdasdasd"),
158
+ React.createElement("div", null, "asdasdasdasd"),
159
+ React.createElement("div", null, "asdasdasdasd"),
160
+ React.createElement("div", null, "asdasdasdasd"),
161
+ React.createElement("div", null, "asdasdasdasd"),
162
+ React.createElement("div", null, "asdasdasdasd"),
163
+ React.createElement("div", null, "asdasdasdasd"),
164
+ React.createElement("div", null, "asdasdasdasd"),
165
+ React.createElement("div", null, "asdasdasdasd"),
166
+ React.createElement("div", null, "asdasdasdasd"),
167
+ React.createElement("div", null, "asdasdasdasd"),
168
+ React.createElement("div", null, "asdasdasdasd"),
169
+ React.createElement("div", null, "asdasdasdasd"),
170
+ React.createElement("div", null, "asdasdasdasd"),
171
+ React.createElement("div", null, "asdasdasdasd"),
172
+ React.createElement("div", null, "asdasdasdasd"),
173
+ React.createElement("div", null, "asdasdasdasd"),
174
+ React.createElement("div", null, "asdasdasdasd"),
175
+ React.createElement("div", null, "asdasdasdasd"),
176
+ React.createElement("div", null, "asdasdasdasd"),
177
+ React.createElement("div", null, "asdasdasdasd"),
178
+ React.createElement("div", null, "asdasdasdasd"),
179
+ React.createElement("div", null, "asdasdasdasd"),
180
+ React.createElement("div", null, "asdasdasdasd"),
181
+ React.createElement("div", null, "asdasdasdasd"),
182
+ React.createElement("div", null, "asdasdasdasd"),
183
+ React.createElement("div", null, "asdasdasdasd"),
184
+ React.createElement("div", null, "asdasdasdasd"),
185
+ React.createElement("div", null, "asdasdasdasd"),
186
+ React.createElement("div", null, "asdasdasdasd"),
187
+ React.createElement("div", null, "asdasdasdasd"),
188
+ React.createElement("div", null, "asdasdasdasd"),
189
+ React.createElement("div", null, "asdasdasdasd"),
190
+ React.createElement("div", null, "asdasdasdasd"),
191
+ React.createElement("div", null, "asdasdasdasd"),
192
+ React.createElement("div", null, "asdasdasdasd"),
193
+ React.createElement("div", null, "asdasdasdasd"),
194
+ React.createElement("div", null, "asdasdasdasd"),
195
+ React.createElement("div", null, "asdasdasdasd"),
196
+ React.createElement("div", null, "asdasdasdasd"),
197
+ React.createElement("div", null, "asdasdasdasd"),
198
+ React.createElement("div", null, "asdasdasdasd"),
199
+ React.createElement("div", null, "asdasdasdasd"),
200
+ React.createElement("div", null, "asdasdasdasd"),
201
+ React.createElement("div", null, "asdasdasdasd"),
202
+ React.createElement("div", null, "asdasdasdasd"),
203
+ React.createElement("div", null, "asdasdasdasd"),
204
+ React.createElement("div", null, "asdasdasdasd"),
205
+ React.createElement("div", null, "asdasdasdasd"),
206
+ React.createElement("div", null, "asdasdasdasd"),
207
+ React.createElement("div", null, "asdasdasdasd"),
208
+ React.createElement("div", null, "asdasdasdasd"),
209
+ React.createElement("div", null, "asdasdasdasd"),
210
+ React.createElement("div", null, "asdasdasdasd"),
211
+ React.createElement("div", null, "asdasdasdasd"),
212
+ React.createElement("div", null, "asdasdasdasd"),
213
+ React.createElement("div", null, "asdasdasdasd"),
214
+ React.createElement("div", null, "asdasdasdasd"),
215
+ React.createElement("div", null, "asdasdasdasd"),
216
+ React.createElement("div", null, "asdasdasdasd"),
217
+ React.createElement("div", null, "asdasdasdasd"),
218
+ React.createElement("div", null, "asdasdasdasd"),
219
+ React.createElement("div", null, "asdasdasdasd"),
220
+ React.createElement("div", null, "asdasdasdasd"),
221
+ React.createElement("div", null, "asdasdasdasd"),
222
+ React.createElement("div", null, "asdasdasdasd"),
223
+ React.createElement("div", null, "asdasdasdasd"),
224
+ React.createElement("div", null, "asdasdasdasd"),
225
+ React.createElement("div", null, "asdasdasdasd"),
226
+ React.createElement("div", null, "asdasdasdasd"),
227
+ React.createElement("div", null, "asdasdasdasd"),
228
+ React.createElement("div", null, "asdasdasdasd"),
229
+ React.createElement("div", null, "asdasdasdasd"),
230
+ React.createElement("div", null, "asdasdasdasd"),
231
+ React.createElement("div", null, "asdasdasdasd"),
232
+ React.createElement("div", null, "asdasdasdasd"),
233
+ React.createElement("div", null, "asdasdasdasd"),
234
+ React.createElement("div", null, "asdasdasdasd"),
235
+ React.createElement("div", null, "asdasdasdasd"),
236
+ React.createElement("div", null, "asdasdasdasd"),
237
+ React.createElement("div", null, "asdasdasdasd"),
238
+ React.createElement("div", null, "asdasdasdasd"),
239
+ React.createElement("div", null, "asdasdasdasd"),
240
+ React.createElement("div", null, "asdasdasdasd"),
241
+ React.createElement("div", null, "asdasdasdasd"),
242
+ React.createElement("div", null, "asdasdasdasd"),
243
+ React.createElement("div", null, "asdasdasdasd"),
244
+ React.createElement("div", null, "asdasdasdasd"),
245
+ React.createElement("div", null, "asdasdasdasd"),
246
+ React.createElement("div", null, "asdasdasdasd"),
247
+ React.createElement("div", null, "asdasdasdasd"),
248
+ React.createElement("div", null, "asdasdasdasd"),
249
+ React.createElement("div", null, "asdasdasdasd"),
250
+ React.createElement("div", null, "asdasdasdasd"),
251
+ React.createElement("div", null, "asdasdasdasd"),
252
+ React.createElement("div", null, "asdasdasdasd"),
253
+ React.createElement("div", null, "asdasdasdasd"),
254
+ React.createElement("div", null, "asdasdasdasd"),
255
+ React.createElement("div", null, "asdasdasdasd"),
256
+ React.createElement("div", null, "asdasdasdasd"),
257
+ React.createElement("div", null, "asdasdasdasd"),
258
+ React.createElement("div", null, "asdasdasdasd"),
259
+ React.createElement("div", null, "asdasdasdasd"),
260
+ React.createElement("div", null, "asdasdasdasd"),
261
+ React.createElement("div", null, "asdasdasdasd"),
262
+ React.createElement("div", null, "asdasdasdasd"),
263
+ React.createElement("div", null, "asdasdasdasd"),
264
+ React.createElement("div", null, "asdasdasdasd"),
265
+ React.createElement("div", null, "asdasdasdasd"),
266
+ React.createElement("div", null, "asdasdasdasd"),
267
+ React.createElement("div", null, "asdasdasdasd"),
268
+ React.createElement("div", null, "asdasdasdasd"),
269
+ React.createElement("div", null, "asdasdasdasd"),
270
+ React.createElement("div", null, "asdasdasdasd"),
271
+ React.createElement("div", null, "asdasdasdasd"),
272
+ React.createElement("div", null, "asdasdasdasd"),
273
+ React.createElement("div", null, "asdasdasdasd"),
274
+ React.createElement("div", null, "asdasdasdasd"),
275
+ React.createElement("div", null, "asdasdasdasd"),
276
+ React.createElement("div", null, "asdasdasdasd"),
277
+ React.createElement("div", null, "asdasdasdasd"),
278
+ React.createElement("div", null, "asdasdasdasd"),
279
+ React.createElement("div", null, "asdasdasdasd"),
280
+ React.createElement("div", null, "asdasdasdasd"),
281
+ React.createElement("div", null, "asdasdasdasd"),
282
+ React.createElement("div", null, "asdasdasdasd"),
283
+ React.createElement("div", null, "asdasdasdasd"),
284
+ React.createElement("div", null, "asdasdasdasd"),
285
+ React.createElement("div", null, "asdasdasdasd"),
286
+ React.createElement("div", null, "asdasdasdasd"),
287
+ React.createElement("div", null, "asdasdasdasd"),
288
+ React.createElement("div", null, "asdasdasdasd"),
289
+ React.createElement("div", null, "asdasdasdasd"),
290
+ React.createElement("div", null, "asdasdasdasd"),
291
+ React.createElement("div", null, "asdasdasdasd"),
292
+ React.createElement("div", null, "asdasdasdasd"),
293
+ React.createElement("div", null, "asdasdasdasd"),
294
+ React.createElement("div", null, "asdasdasdasd"),
295
+ React.createElement("div", null, "asdasdasdasd"),
296
+ React.createElement("div", null, "asdasdasdasd"),
297
+ React.createElement("div", null, "asdasdasdasd"),
298
+ React.createElement("div", null, "asdasdasdasd"),
299
+ React.createElement("div", null, "asdasdasdasd"),
300
+ React.createElement("div", null, "asdasdasdasd"),
301
+ React.createElement("div", null, "asdasdasdasd"),
302
+ React.createElement("div", null, "asdasdasdasd"),
303
+ React.createElement("div", null, "asdasdasdasd"),
304
+ React.createElement("div", null, "asdasdasdasd"),
305
+ React.createElement("div", null, "asdasdasdasd"),
306
+ React.createElement("div", null, "asdasdasdasd"),
307
+ React.createElement("div", null, "asdasdasdasd"),
308
+ React.createElement("div", null, "asdasdasdasd"),
309
+ React.createElement("div", null, "asdasdasdasd"),
310
+ React.createElement("div", null, "asdasdasdasd"),
311
+ React.createElement("div", null, "asdasdasdasd"),
312
+ React.createElement("div", null, "asdasdasdasd"),
313
+ React.createElement("div", null, "asdasdasdasd"),
314
+ React.createElement("div", null, "asdasdasdasd"),
315
+ React.createElement("div", null, "asdasdasdasd"),
316
+ React.createElement("div", null, "asdasdasdasd"),
317
+ React.createElement("div", null, "asdasdasdasd"),
318
+ React.createElement("div", null, "asdasdasdasd"),
319
+ React.createElement("div", null, "asdasdasdasd"),
320
+ React.createElement("div", null, "asdasdasdasd"),
321
+ React.createElement("div", null, "asdasdasdasd"),
322
+ React.createElement("div", null, "asdasdasdasd"),
323
+ React.createElement("div", null, "asdasdasdasd"),
324
+ React.createElement("div", null, "asdasdasdasd"),
325
+ React.createElement("div", null, "asdasdasdasd"),
326
+ React.createElement("div", null, "asdasdasdasd"),
327
+ React.createElement("div", null, "asdasdasdasd"),
328
+ React.createElement("div", null, "asdasdasdasd"),
329
+ React.createElement("div", null, "asdasdasdasd"),
330
+ React.createElement("div", null, "asdasdasdasd"),
331
+ React.createElement("div", null, "asdasdasdasd"),
332
+ React.createElement("div", null, "asdasdasdasd"),
333
+ React.createElement("div", null, "asdasdasdasd"),
334
+ React.createElement("div", null, "asdasdasdasd"),
335
+ React.createElement("div", null, "asdasdasdasd"),
336
+ React.createElement("div", null, "asdasdasdasd"),
337
+ React.createElement("div", null, "asdasdasdasd"),
338
+ React.createElement("div", null, "asdasdasdasd"),
339
+ React.createElement("div", null, "asdasdasdasd"),
340
+ React.createElement("div", null, "asdasdasdasd"),
341
+ React.createElement("div", null, "asdasdasdasd"),
342
+ React.createElement("div", null, "asdasdasdasd"),
343
+ React.createElement("div", null, "asdasdasdasd"),
344
+ React.createElement("div", null, "asdasdasdasd"),
345
+ React.createElement("div", null, "asdasdasdasd"),
346
+ React.createElement("div", null, "asdasdasdasd"),
347
+ React.createElement("div", null, "asdasdasdasd"),
348
+ React.createElement("div", null, "asdasdasdasd"),
349
+ React.createElement("div", null, "asdasdasdasd"),
350
+ React.createElement("div", null, "asdasdasdasd"),
351
+ React.createElement("div", null, "asdasdasdasd"),
352
+ React.createElement("div", null, "asdasdasdasd"),
353
+ React.createElement("div", null, "asdasdasdasd"),
354
+ React.createElement("div", null, "asdasdasdasd"),
355
+ React.createElement("div", null, "asdasdasdasd"),
356
+ React.createElement("div", null, "asdasdasdasd"),
357
+ React.createElement("div", null, "asdasdasdasd"),
358
+ React.createElement("div", null, "asdasdasdasd"),
359
+ React.createElement("div", null, "asdasdasdasd"),
360
+ React.createElement("div", null, "asdasdasdasd"),
361
+ React.createElement("div", null, "asdasdasdasd"),
362
+ React.createElement("div", null, "asdasdasdasd"),
363
+ React.createElement("div", null, "asdasdasdasd"),
364
+ React.createElement("div", null, "asdasdasdasd"),
365
+ React.createElement("div", null, "asdasdasdasd"),
366
+ React.createElement("div", null, "asdasdasdasd"),
367
+ React.createElement("div", null, "asdasdasdasd"),
368
+ React.createElement("div", null, "asdasdasdasd"),
369
+ React.createElement("div", null, "asdasdasdasd"),
370
+ React.createElement("div", null, "asdasdasdasd"),
371
+ React.createElement("div", null, "asdasdasdasd"),
372
+ React.createElement("div", null, "asdasdasdasd"),
373
+ React.createElement("div", null, "asdasdasdasd"),
374
+ React.createElement("div", null, "asdasdasdasd"),
375
+ React.createElement("div", null, "asdasdasdasd"),
376
+ React.createElement("div", null, "asdasdasdasd"),
377
+ React.createElement("div", null, "asdasdasdasd"),
378
+ React.createElement("div", null, "asdasdasdasd"),
379
+ React.createElement("div", null, "asdasdasdasd"),
380
+ React.createElement("div", null, "asdasdasdasd"),
381
+ React.createElement("div", null, "asdasdasdasd"),
382
+ React.createElement("div", null, "asdasdasdasd"),
383
+ React.createElement("div", null, "asdasdasdasd"),
384
+ React.createElement("div", null, "asdasdasdasd"),
385
+ React.createElement("div", null, "asdasdasdasd"),
386
+ React.createElement("div", null, "asdasdasdasd"),
387
+ React.createElement("div", null, "asdasdasdasd"),
388
+ React.createElement("div", null, "asdasdasdasd"),
389
+ React.createElement("div", null, "asdasdasdasd"),
390
+ React.createElement("div", null, "asdasdasdasd"),
391
+ React.createElement("div", null, "asdasdasdasd"),
392
+ React.createElement("div", null, "asdasdasdasd"),
393
+ React.createElement("div", null, "asdasdasdasd"),
394
+ React.createElement("div", null, "asdasdasdasd"),
395
+ React.createElement("div", null, "asdasdasdasd"),
396
+ React.createElement("div", null, "asdasdasdasd"),
397
+ React.createElement("div", null, "asdasdasdasd"),
398
+ React.createElement("div", null, "asdasdasdasd"),
399
+ React.createElement("div", null, "asdasdasdasd"),
400
+ React.createElement("div", null, "asdasdasdasd"),
401
+ React.createElement("div", null, "asdasdasdasd"),
402
+ React.createElement("div", null, "asdasdasdasd"),
403
+ React.createElement("div", null, "asdasdasdasd"),
404
+ React.createElement("div", null, "asdasdasdasd"),
405
+ React.createElement("div", null, "asdasdasdasd"),
406
+ React.createElement("div", null, "asdasdasdasd"),
407
+ React.createElement("div", null, "asdasdasdasd"),
56
408
  React.createElement("iframe", { style: { width: '1000px', height: '400px' }, title: "\u6D4B\u8BD5iframe\u6253\u5370", src: "http://localhost:8787/print" })),
57
409
  React.createElement("div", { className: "test1" }, "\u6211\u662F\u591A\u4F59\u7684\u6570\u636E \u6211\u662F\u591A\u4F59\u7684\u6570\u636E"),
58
- React.createElement("div", { className: "test2" }, "\u6211\u662F\u591A\u4F59\u7684\u6570\u636E \u6211\u662F\u591A\u4F59\u7684\u6570\u636E")));
410
+ React.createElement("div", { className: "test2" }, "\u6211\u662F\u591A\u4F59\u7684\u6570\u636E \u6211\u662F\u591A\u4F59\u7684\u6570\u636E"),
411
+ React.createElement(Footer, { footerDom: [
412
+ {
413
+ render: function () { return React.createElement(Print, { key: 1, showWater: true }); },
414
+ },
415
+ {
416
+ render: function () { return React.createElement(Print, { key: 2, showWater: true }); },
417
+ },
418
+ ] })));
59
419
  };
60
420
  export default PrintDemo;
package/dist/components/Print/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Print from './print';
2
+ export default Print;
package/dist/components/Print/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Print from './print';
2
+ export default Print;
package/dist/components/Print/print.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @author 陈亚雄
3
+ * @description 打印组件
4
+ */
5
+ import React from 'react';
6
+ interface IProps {
7
+ /** 按钮文本 */
8
+ btnText?: string;
9
+ /** 是否显示icon */
10
+ showIcon?: boolean;
11
+ /** 是否添加水印 */
12
+ showWater?: boolean;
13
+ /** 水印的文本内容 */
14
+ waterText?: string;
15
+ /** 水印添加到的容器类名 */
16
+ waterClassName?: string;
17
+ /** 需要隐藏的类 */
18
+ hiddenClassNames?: string[];
19
+ }
20
+ declare const Print: React.FC<IProps>;
21
+ export default Print;
package/dist/components/Print/print.js ADDED
@@ -0,0 +1,71 @@
1
+ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
2
+ for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
3
+ to[j] = from[i];
4
+ return to;
5
+ };
6
+ /**
7
+ * @author 陈亚雄
8
+ * @description 打印组件
9
+ */
10
+ import React, { useEffect } from 'react';
11
+ // redux
12
+ // ztxkui公共组件
13
+ import { Button } from '../../index';
14
+ import { PrinterOutlined } from '@ant-design/icons';
15
+ // 添加水印的方法
16
+ function addWaterHandle(waterText, waterClassName) {
17
+ var canvas = document.createElement('canvas');
18
+ var waterStyleDom = document.getElementById('water-style-dom-110011');
19
+ if (waterStyleDom) {
20
+ waterStyleDom.remove();
21
+ }
22
+ canvas.width = 200;
23
+ canvas.height = 100;
24
+ var ctx = canvas.getContext('2d');
25
+ if (ctx) {
26
+ ctx.rotate((-15 * Math.PI) / 180); // 水印旋转角度
27
+ ctx.font = '15px 微软雅黑';
28
+ ctx.fillStyle = 'rgba(0,0,0,0.5)';
29
+ ctx.textAlign = 'center';
30
+ ctx.textBaseline = 'middle';
31
+ ctx.fillText(waterText || '内部资料，严禁外泄!', canvas.width / 2, canvas.height); // 水印在画布的位置x，y轴
32
+ }
33
+ var styleDom = document.createElement('style');
34
+ styleDom.setAttribute('type', 'text/css');
35
+ styleDom.setAttribute('id', 'water-style-dom-110011');
36
+ styleDom.innerText =
37
+ '@media print{' +
38
+ (waterClassName ? "." + waterClassName : 'body') +
39
+ ' {background: url(' +
40
+ canvas.toDataURL('image/png') +
41
+ ') left top repeat;}}';
42
+ document.head.appendChild(styleDom);
43
+ }
44
+ var Print = function (_a) {
45
+ var _b = _a.btnText, btnText = _b === void 0 ? '打印' : _b, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, showWater = _a.showWater, _d = _a.waterText, waterText = _d === void 0 ? '内部资料，严禁外泄!' : _d, _e = _a.waterClassName, waterClassName = _e === void 0 ? 'printArea' : _e, _f = _a.hiddenClassNames, hiddenClassNames = _f === void 0 ? [] : _f;
46
+ /**
47
+ * 打印方法
48
+ */
49
+ var onPrintHandle = function () {
50
+ var printStyleDom = document.getElementById('print-style-dom-110011');
51
+ if (printStyleDom) {
52
+ printStyleDom.remove();
53
+ }
54
+ var styleDom = document.createElement('style');
55
+ styleDom.setAttribute('type', 'text/css');
56
+ styleDom.setAttribute('id', 'print-style-dom-110011');
57
+ styleDom.innerText = "@media print{ " + __spreadArray(__spreadArray([], hiddenClassNames), [
58
+ 'hiddenPrint',
59
+ ]).join(',') + " { display: none; } }";
60
+ document.head.appendChild(styleDom);
61
+ window.print();
62
+ };
63
+ // 是否添加水印
64
+ useEffect(function () {
65
+ if (showWater) {
66
+ addWaterHandle(waterText, waterClassName);
67
+ }
68
+ }, [showWater, waterText, waterClassName]);
69
+ return (React.createElement(Button, { type: "primary", icon: showIcon && React.createElement(PrinterOutlined, null), onClick: onPrintHandle }, btnText));
70
+ };
71
+ export default Print;
package/dist/components/business/Footer/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { ReactElement } from 'react';
2
2
  import { ButtonType } from '../../../components/Button/button';
3
3
  interface IPagination {
4
4
  total: number;
@@ -19,7 +19,8 @@ interface IDropdown {
19
19
  overlay: any;
20
20
  }
21
21
  export interface IFooterDom extends Partial<IPagination & IBtn & IDropdown> {
22
- DOMType: 'button' | 'pagination' | 'dropdown';
22
+ DOMType?: 'button' | 'pagination' | 'dropdown';
23
+ render?: () => ReactElement;
23
24
  }
24
25
  interface IProps {
25
26
  footerDom?: IFooterDom[] | null;
package/dist/components/business/Footer/index.js CHANGED
@@ -4,7 +4,9 @@ var pageSizeOptions = ['10', '20', '30', '100'];
4
4
  var ZtFooter = Layout.Footer;
5
5
  var Footer = function (_a) {
6
6
  var footerDom = _a.footerDom, style = _a.style, className = _a.className;
7
- return (React.createElement(ZtFooter, { className: className ? "footer " + className : 'footer', style: style }, footerDom ? (React.createElement("div", { className: "footer__btn-group" }, footerDom.map(function (item, index) {
7
+ return (React.createElement(ZtFooter, { className: className
8
+ ? "footer hidden-print-footer " + className
9
+ : 'footer hidden-print-footer', style: style }, footerDom ? (React.createElement("div", { className: "footer__btn-group" }, footerDom.map(function (item, index) {
8
10
  if (item.DOMType === 'button') {
9
11
  var type = item.type, loading = item.loading, disabled = item.disabled, onClick = item.onClick;
10
12
  return (React.createElement(Button, { key: index, type: type, loading: loading, disabled: disabled, onClick: onClick }, item.text));
@@ -16,6 +18,9 @@ var Footer = function (_a) {
16
18
  if (item.DOMType === 'dropdown') {
17
19
  return (React.createElement(Dropdown.Button, { className: "footer__dropdown-btn", overlay: item.overlay, key: index }, item.text));
18
20
  }
21
+ if (item.render) {
22
+ return item.render();
23
+ }
19
24
  return null;
20
25
  }))) : null));
21
26
  };
package/dist/index.d.ts CHANGED
@@ -40,6 +40,7 @@ export { UserInfo, UserPassword } from './components/business/Common';
40
40
  export { default as Analyse } from './components/business/Analyse';
41
41
  export { default as SortList } from './components/business/SortList';
42
42
  export { default as Empty } from './components/Empty';
43
+ export { default as Print } from './components/Print';
43
44
  export { ConfigProvider, Drawer, message, Space, Grid, Divider, Dropdown, Badge, List, Result, Spin, Popconfirm, TreeSelect, Tree, Progress, Cascader, Tooltip, Descriptions, Image, Popover, Breadcrumb, Transfer, Row, Col, } from 'antd';
44
45
  export { default as zhCN } from 'antd/lib/locale/zh_CN';
45
46
  export { default as Icon, createFromIconfontCN } from '@ant-design/icons';
package/dist/index.js CHANGED
@@ -138,6 +138,7 @@ export { UserInfo, UserPassword } from './components/business/Common';
138
138
  export { default as Analyse } from './components/business/Analyse';
139
139
  export { default as SortList } from './components/business/SortList';
140
140
  export { default as Empty } from './components/Empty';
141
+ export { default as Print } from './components/Print';
141
142
  export { ConfigProvider, Drawer, message, Space, Grid, Divider, Dropdown, Badge, List, Result, Spin, Popconfirm, TreeSelect, Tree, Progress, Cascader, Tooltip, Descriptions, Image, Popover, Breadcrumb, Transfer, Row, Col, } from 'antd';
142
143
  export { default as zhCN } from 'antd/lib/locale/zh_CN';
143
144
  export { default as Icon, createFromIconfontCN } from '@ant-design/icons';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ztxkui",
3
- "version": "2.8.9",
3
+ "version": "2.9.0",
4
4
  "private": false,
5
5
  "description": "React components library",
6
6
  "author": "zt-front-end",
@@ -16,7 +16,9 @@
16
16
  "axios": "^0.21.1",
17
17
  "classnames": "^2.2.6",
18
18
  "dayjs": "^1.10.4",
19
+ "html2canvas": "^1.4.1",
19
20
  "immutability-helper": "^3.1.1",
21
+ "jspdf": "^2.5.1",
20
22
  "number-precision": "^1.5.0",
21
23
  "react-dnd": "^14.0.2",
22
24
  "react-dnd-html5-backend": "^14.0.0",