@jcyao/print-sdk 1.0.1 → 1.1.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.
- package/CHANGELOG.md +106 -0
- package/README.md +13 -5
- package/dist/index.esm.js +291 -67
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +291 -67
- package/dist/index.js.map +1 -1
- package/dist/printEngine/constants.d.ts +2 -2
- package/dist/printEngine.d.ts +8 -3
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -50,8 +50,8 @@ const TABLE_DEFAULT = {
|
|
|
50
50
|
HEADER_HEIGHT: 10,
|
|
51
51
|
/** 数据行最小高度(mm) */
|
|
52
52
|
MIN_ROW_HEIGHT: 8,
|
|
53
|
-
/**
|
|
54
|
-
ROW_HEIGHT_FACTOR: 1.
|
|
53
|
+
/** 行高计算系数(用于 min-height,实际高度由内容撑开) */
|
|
54
|
+
ROW_HEIGHT_FACTOR: 1.0,
|
|
55
55
|
};
|
|
56
56
|
/**
|
|
57
57
|
* 样式默认值
|
|
@@ -606,7 +606,11 @@ class TableRenderer {
|
|
|
606
606
|
// 表头配置,过滤隐藏列
|
|
607
607
|
const allColumns = (props === null || props === void 0 ? void 0 : props.columns) || [];
|
|
608
608
|
const visibleColumns = allColumns.filter((col) => !col.hidden);
|
|
609
|
-
|
|
609
|
+
// 支持分页传入的 _showHeader 标记,优先于 props.showHeader
|
|
610
|
+
const explicitShowHeader = props && typeof props._showHeader === 'boolean'
|
|
611
|
+
? props._showHeader
|
|
612
|
+
: undefined;
|
|
613
|
+
const showHeader = explicitShowHeader !== undefined ? explicitShowHeader : (props === null || props === void 0 ? void 0 : props.showHeader) !== false;
|
|
610
614
|
const bordered = (props === null || props === void 0 ? void 0 : props.bordered) !== false;
|
|
611
615
|
// 计算表格宽度
|
|
612
616
|
let tableWidthMm;
|
|
@@ -635,9 +639,17 @@ class TableRenderer {
|
|
|
635
639
|
// 备用:使用默认值
|
|
636
640
|
tableWidthMm = COMPONENT_DEFAULT_SIZE.TABLE_WIDTH;
|
|
637
641
|
}
|
|
642
|
+
// ✅ 检查 xMm 是否已超过可用宽度
|
|
643
|
+
const availableWidth = context.pageInfo
|
|
644
|
+
? context.pageInfo.widthMm - context.pageInfo.marginMm.left - context.pageInfo.marginMm.right
|
|
645
|
+
: COMPONENT_DEFAULT_SIZE.TABLE_WIDTH;
|
|
646
|
+
if (xMm >= availableWidth) {
|
|
647
|
+
console.error(`[TableRenderer] 表格位置错误:xMm(${xMm.toFixed(2)}mm) 已超过页面可用宽度(${availableWidth.toFixed(2)}mm),` +
|
|
648
|
+
`表格将无法正常显示。请调整表格的 x 位置,使其小于 ${availableWidth.toFixed(2)}mm`);
|
|
649
|
+
}
|
|
638
650
|
// 最小宽度保护
|
|
639
651
|
if (tableWidthMm < 10) {
|
|
640
|
-
console.warn(
|
|
652
|
+
console.warn(`[TableRenderer] 表格宽度过小 (${tableWidthMm.toFixed(2)}mm),强制设置为最小宽度 10mm`);
|
|
641
653
|
tableWidthMm = 10;
|
|
642
654
|
}
|
|
643
655
|
console.log(tableWidthMm, "tableWidthMm");
|
|
@@ -649,20 +661,26 @@ class TableRenderer {
|
|
|
649
661
|
// 单元格样式
|
|
650
662
|
const cellBorder = bordered ? `border: 1px solid ${TABLE_STYLE_DEFAULT.BORDER_COLOR};` : '';
|
|
651
663
|
const cellPadding = `padding: ${TABLE_STYLE_DEFAULT.CELL_PADDING};`;
|
|
652
|
-
const cellTextStyle = `white-space: normal; word-break: break-word; line-height: ${STYLE_DEFAULT.LINE_HEIGHT}; vertical-align:
|
|
664
|
+
const cellTextStyle = `white-space: normal; word-break: break-word; line-height: ${STYLE_DEFAULT.LINE_HEIGHT}; vertical-align: middle;`;
|
|
653
665
|
const textAlign = (style === null || style === void 0 ? void 0 : style.textAlign) || 'left'; // 对齐方式
|
|
666
|
+
// ✅ 计算均分列宽(简化方案:按列数均分表格宽度)
|
|
667
|
+
const colCount = visibleColumns.length || 1;
|
|
668
|
+
const colWidthPercent = (100 / colCount).toFixed(2);
|
|
654
669
|
// ✅ 计算表头和数据行的高度(mm 转 px)
|
|
655
|
-
|
|
656
|
-
const
|
|
670
|
+
// 使用全局常量 ROW_HEIGHT_FACTOR,实际高度由内容自然撑开(min-height)
|
|
671
|
+
const headerHeightPx = TABLE_DEFAULT.HEADER_HEIGHT * context.mmToPx;
|
|
672
|
+
const rowHeightPx = TABLE_DEFAULT.MIN_ROW_HEIGHT * TABLE_DEFAULT.ROW_HEIGHT_FACTOR * context.mmToPx;
|
|
657
673
|
// 渲染表头
|
|
658
674
|
let headerHtml = '';
|
|
659
675
|
if (showHeader && visibleColumns.length > 0) {
|
|
660
676
|
const headerCells = visibleColumns
|
|
661
677
|
.map((col) => {
|
|
662
678
|
const title = col.title || col.dataIndex;
|
|
663
|
-
|
|
679
|
+
// 使用百分比宽度实现均分,min-height 允许自然扩展
|
|
680
|
+
return `<th style="${cellBorder} ${cellPadding} ${cellTextStyle} background: ${TABLE_STYLE_DEFAULT.HEADER_BACKGROUND}; font-weight: 600; text-align: ${textAlign}; width: ${colWidthPercent}%; min-height: ${headerHeightPx}px; box-sizing: border-box;">${title}</th>`;
|
|
664
681
|
})
|
|
665
682
|
.join('');
|
|
683
|
+
// 表头使用固定高度,表体使用 min-height
|
|
666
684
|
headerHtml = `<thead class="table-header-repeat"><tr style="height: ${headerHeightPx}px;">${headerCells}</tr></thead>`;
|
|
667
685
|
}
|
|
668
686
|
// 渲染表体
|
|
@@ -673,17 +691,19 @@ class TableRenderer {
|
|
|
673
691
|
const cells = visibleColumns
|
|
674
692
|
.map((col) => {
|
|
675
693
|
const value = row[col.dataIndex] || '';
|
|
676
|
-
|
|
694
|
+
// 使用百分比宽度,min-height 允许内容换行时自然扩展
|
|
695
|
+
return `<td style="${cellBorder} ${cellPadding} ${cellTextStyle} text-align: ${textAlign}; width: ${colWidthPercent}%; min-height: ${rowHeightPx}px; box-sizing: border-box;">${value}</td>`;
|
|
677
696
|
})
|
|
678
697
|
.join('');
|
|
679
|
-
|
|
698
|
+
// 行使用 min-height 而非固定 height
|
|
699
|
+
return `<tr style="min-height: ${rowHeightPx}px;">${cells}</tr>`;
|
|
680
700
|
})
|
|
681
701
|
.join('');
|
|
682
702
|
bodyHtml = `<tbody>${rows}</tbody>`;
|
|
683
703
|
}
|
|
684
704
|
else {
|
|
685
705
|
const colspan = visibleColumns.length || 1;
|
|
686
|
-
bodyHtml = `<tbody><tr style="height: ${rowHeightPx}px;"><td colspan="${colspan}" style="${cellBorder} ${cellPadding} text-align: center; color: #999; height: ${rowHeightPx}px; box-sizing: border-box;">暂无数据</td></tr></tbody>`;
|
|
706
|
+
bodyHtml = `<tbody><tr style="min-height: ${rowHeightPx}px;"><td colspan="${colspan}" style="${cellBorder} ${cellPadding} text-align: center; color: #999; min-height: ${rowHeightPx}px; box-sizing: border-box;">暂无数据</td></tr></tbody>`;
|
|
687
707
|
}
|
|
688
708
|
// 渲染合计行(新增)
|
|
689
709
|
const showSummary = (props === null || props === void 0 ? void 0 : props.showSummary) === true;
|
|
@@ -698,14 +718,14 @@ class TableRenderer {
|
|
|
698
718
|
? props._totalData
|
|
699
719
|
: tableData;
|
|
700
720
|
const summaryHtml = shouldShowSummary
|
|
701
|
-
? this.renderSummary(summaryData, visibleColumns, props, cellBorder, cellPadding, cellTextStyle, rowHeightPx, textAlign)
|
|
721
|
+
? this.renderSummary(summaryData, visibleColumns, props, cellBorder, cellPadding, cellTextStyle, rowHeightPx, textAlign, colWidthPercent)
|
|
702
722
|
: '';
|
|
703
723
|
return `<table class="print-table" style="${tableStyleStr}">${headerHtml}${bodyHtml}${summaryHtml}</table>`;
|
|
704
724
|
}
|
|
705
725
|
/**
|
|
706
726
|
* 渲染合计行
|
|
707
727
|
*/
|
|
708
|
-
renderSummary(data, columns, props, cellBorder, cellPadding, cellTextStyle, rowHeightPx, defaultTextAlign) {
|
|
728
|
+
renderSummary(data, columns, props, cellBorder, cellPadding, cellTextStyle, rowHeightPx, defaultTextAlign, colWidthPercent = 'auto') {
|
|
709
729
|
if (!columns.length)
|
|
710
730
|
return '';
|
|
711
731
|
const summaryLabel = props.summaryLabel || '合计';
|
|
@@ -728,7 +748,8 @@ class TableRenderer {
|
|
|
728
748
|
${cellPadding}
|
|
729
749
|
${cellTextStyle}
|
|
730
750
|
text-align: ${col.align || defaultTextAlign};
|
|
731
|
-
|
|
751
|
+
width: ${colWidthPercent}%;
|
|
752
|
+
min-height: ${rowHeightPx}px;
|
|
732
753
|
box-sizing: border-box;
|
|
733
754
|
background: ${bgColor};
|
|
734
755
|
font-weight: ${fontWeight};
|
|
@@ -736,7 +757,7 @@ class TableRenderer {
|
|
|
736
757
|
`.trim().replace(/\s+/g, ' ');
|
|
737
758
|
return `<td style="${cellStyle}">${content}</td>`;
|
|
738
759
|
}).join('');
|
|
739
|
-
return `<tfoot><tr style="height: ${rowHeightPx}px;">${cells}</tr></tfoot>`;
|
|
760
|
+
return `<tfoot><tr style="min-height: ${rowHeightPx}px;">${cells}</tr></tfoot>`;
|
|
740
761
|
}
|
|
741
762
|
/**
|
|
742
763
|
* 计算单列合计值(使用 Decimal.js 解决精度问题)
|
|
@@ -782,25 +803,38 @@ class TableRenderer {
|
|
|
782
803
|
}
|
|
783
804
|
}
|
|
784
805
|
catch (error) {
|
|
785
|
-
console.error('
|
|
806
|
+
console.error('[TableRenderer] 合计计算错误:', error);
|
|
807
|
+
// ✅ 返回友好的错误提示,而不是静默失败
|
|
808
|
+
return '计算错误';
|
|
809
|
+
}
|
|
810
|
+
// ✅ 格式化前检查结果是否有效
|
|
811
|
+
if (!result || typeof result.toFixed !== 'function') {
|
|
812
|
+
console.warn('[TableRenderer] 合计结果无效:', result);
|
|
786
813
|
return '-';
|
|
787
814
|
}
|
|
788
815
|
// 格式化
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
816
|
+
try {
|
|
817
|
+
const precision = (_a = summary.precision) !== null && _a !== void 0 ? _a : 2;
|
|
818
|
+
const formatted = result.toFixed(precision);
|
|
819
|
+
const prefix = summary.prefix || '';
|
|
820
|
+
const suffix = summary.suffix || '';
|
|
821
|
+
return `${prefix}${formatted}${suffix}`;
|
|
822
|
+
}
|
|
823
|
+
catch (formatError) {
|
|
824
|
+
console.error('[TableRenderer] 格式化合计结果失败:', formatError);
|
|
825
|
+
return '-';
|
|
826
|
+
}
|
|
794
827
|
}
|
|
795
828
|
calculateHeight(component, context) {
|
|
796
829
|
var _a, _b, _c;
|
|
797
|
-
//
|
|
830
|
+
// 表格高度:简单估算(用于初始布局计算,实际分页使用 measureTableRowHeights)
|
|
798
831
|
if ((_a = component.binding) === null || _a === void 0 ? void 0 : _a.path) {
|
|
799
832
|
const data = context.getValueByPath(component.binding.path);
|
|
800
833
|
if (Array.isArray(data) && data.length > 0) {
|
|
801
834
|
const headerHeight = ((_b = component.props) === null || _b === void 0 ? void 0 : _b.showHeader) !== false ? TABLE_DEFAULT.HEADER_HEIGHT : 0;
|
|
802
|
-
|
|
803
|
-
const
|
|
835
|
+
// 使用基础行高(不乘系数),实际高度由渲染后测量决定
|
|
836
|
+
const rowHeight = TABLE_DEFAULT.MIN_ROW_HEIGHT;
|
|
837
|
+
const summaryHeight = ((_c = component.props) === null || _c === void 0 ? void 0 : _c.showSummary) === true ? rowHeight : 0;
|
|
804
838
|
return headerHeight + data.length * rowHeight + summaryHeight;
|
|
805
839
|
}
|
|
806
840
|
}
|
|
@@ -1189,6 +1223,11 @@ class PrintEngine {
|
|
|
1189
1223
|
* 计算表头高度(mm)
|
|
1190
1224
|
*/
|
|
1191
1225
|
calculateTableHeaderHeight(comp) {
|
|
1226
|
+
var _a;
|
|
1227
|
+
// 如果用户设置 showHeader: false,则表头高度为 0
|
|
1228
|
+
if (((_a = comp.props) === null || _a === void 0 ? void 0 : _a.showHeader) === false) {
|
|
1229
|
+
return 0;
|
|
1230
|
+
}
|
|
1192
1231
|
// 使用 TABLE_DEFAULT.HEADER_HEIGHT 作为表头高度
|
|
1193
1232
|
return TABLE_DEFAULT.HEADER_HEIGHT;
|
|
1194
1233
|
}
|
|
@@ -1309,7 +1348,7 @@ class PrintEngine {
|
|
|
1309
1348
|
* 2. 按顺序累加高度,遇到表格就拆分
|
|
1310
1349
|
* 3. 换页时从 marginTop 开始,忽略原 gap
|
|
1311
1350
|
*/
|
|
1312
|
-
calculatePages(components) {
|
|
1351
|
+
async calculatePages(components) {
|
|
1313
1352
|
var _a, _b, _c;
|
|
1314
1353
|
const { page } = this.template;
|
|
1315
1354
|
const { heightMm } = this.getPageSize();
|
|
@@ -1329,8 +1368,10 @@ class PrintEngine {
|
|
|
1329
1368
|
return { comp, gap: (comp.layout.yMm || 0) };
|
|
1330
1369
|
}
|
|
1331
1370
|
const prevComp = sortedComponents[index - 1];
|
|
1371
|
+
// ✅ 使用设计高度计算相对间距(保留负数,表示组件重叠)
|
|
1372
|
+
// 注意:表格的实际高度会在 splitTableWithGap 中重新计算
|
|
1332
1373
|
const prevBottom = (prevComp.layout.yMm || 0) + (prevComp.layout.heightMm || 0);
|
|
1333
|
-
const gap = (comp.layout.yMm || 0) - prevBottom;
|
|
1374
|
+
const gap = (comp.layout.yMm || 0) - prevBottom; // 保留负数,表示组件重叠
|
|
1334
1375
|
return { comp, gap };
|
|
1335
1376
|
});
|
|
1336
1377
|
// 3. 遍历组件,累加高度
|
|
@@ -1340,8 +1381,13 @@ class PrintEngine {
|
|
|
1340
1381
|
let currentPageHeight = marginTop; // 当前页的累计高度
|
|
1341
1382
|
let isFirstComponentInPage = true; // 标记当前页是否是第一个组件
|
|
1342
1383
|
for (let i = 0; i < componentsWithGaps.length; i++) {
|
|
1343
|
-
const { comp, gap } = componentsWithGaps[i];
|
|
1384
|
+
const { comp, gap: designGap } = componentsWithGaps[i];
|
|
1344
1385
|
const compHeightMm = comp.layout.heightMm || 50;
|
|
1386
|
+
// ✅ 使用设计时的相对间距(保留负数,表示组件重叠)
|
|
1387
|
+
// designGap 是设计时计算的:组件B.yMm - (组件A.yMm + 组件A.heightMm)
|
|
1388
|
+
// 这代表了设计意图中的"组件A底部到组件B顶部的间距"
|
|
1389
|
+
// 负数表示组件重叠,这是设计时允许的布局方式
|
|
1390
|
+
const actualGap = designGap;
|
|
1345
1391
|
// 边界检查:组件高度接近页面高度时输出警告
|
|
1346
1392
|
if (compHeightMm > availableHeightMm * 0.8) {
|
|
1347
1393
|
console.warn(`组件 ${comp.id} (${comp.type}) 高度 ${compHeightMm.toFixed(2)}mm 接近页面可用高度 ${availableHeightMm.toFixed(2)}mm,可能影响分页效果`);
|
|
@@ -1350,14 +1396,16 @@ class PrintEngine {
|
|
|
1350
1396
|
if (comp.type === 'table' && ((_c = comp.binding) === null || _c === void 0 ? void 0 : _c.path)) {
|
|
1351
1397
|
const tableData = context.getValueByPath(comp.binding.path);
|
|
1352
1398
|
if (Array.isArray(tableData) && tableData.length > 0) {
|
|
1353
|
-
const result = this.splitTableWithGap(comp, tableData,
|
|
1399
|
+
const result = await this.splitTableWithGap(comp, tableData, actualGap, isFirstComponentInPage, availableHeightMm, currentPageHeight, pages, currentPage);
|
|
1354
1400
|
currentPage = result.currentPage;
|
|
1355
|
-
|
|
1356
|
-
|
|
1401
|
+
// ✅ 对于紧跟表格的组件,使用表格实际底部位置作为参考
|
|
1402
|
+
// 这样可以确保无论表格是否跨页,后续组件与表格的相对间距保持一致
|
|
1403
|
+
currentPageHeight = result.lastTableFragmentBottom;
|
|
1404
|
+
isFirstComponentInPage = false; // 表格后的组件不是页面第一个组件
|
|
1357
1405
|
}
|
|
1358
1406
|
else {
|
|
1359
1407
|
// 空表格:按普通组件处理
|
|
1360
|
-
if (this.shouldBreakPage(currentPageHeight, compHeightMm,
|
|
1408
|
+
if (this.shouldBreakPage(currentPageHeight, compHeightMm, actualGap, availableHeightMm, isFirstComponentInPage) && currentPage.length > 0) {
|
|
1361
1409
|
// 换页
|
|
1362
1410
|
pages.push(currentPage);
|
|
1363
1411
|
currentPage = [];
|
|
@@ -1373,7 +1421,7 @@ class PrintEngine {
|
|
|
1373
1421
|
}
|
|
1374
1422
|
else {
|
|
1375
1423
|
// 同一页:应用 gap
|
|
1376
|
-
currentPageHeight +=
|
|
1424
|
+
currentPageHeight += actualGap;
|
|
1377
1425
|
compCopy.layout.yMm = currentPageHeight;
|
|
1378
1426
|
currentPageHeight += compHeightMm;
|
|
1379
1427
|
}
|
|
@@ -1384,7 +1432,7 @@ class PrintEngine {
|
|
|
1384
1432
|
// 4.2 普通组件:按相对间距累加高度
|
|
1385
1433
|
else {
|
|
1386
1434
|
// 使用辅助方法判断是否需要换页
|
|
1387
|
-
if (this.shouldBreakPage(currentPageHeight, compHeightMm,
|
|
1435
|
+
if (this.shouldBreakPage(currentPageHeight, compHeightMm, actualGap, availableHeightMm, isFirstComponentInPage) && currentPage.length > 0) {
|
|
1388
1436
|
// 换页
|
|
1389
1437
|
pages.push(currentPage);
|
|
1390
1438
|
currentPage = [];
|
|
@@ -1394,13 +1442,15 @@ class PrintEngine {
|
|
|
1394
1442
|
// 创建组件副本,避免修改原数据
|
|
1395
1443
|
const compCopy = Object.assign(Object.assign({}, comp), { layout: Object.assign({}, comp.layout) });
|
|
1396
1444
|
if (isFirstComponentInPage) {
|
|
1397
|
-
//
|
|
1445
|
+
// 新页面第一个组件:应用 gap(从页面顶部开始的相对间距)
|
|
1446
|
+
// 注意:即使在新页面,也应该保持设计时的相对间距
|
|
1447
|
+
currentPageHeight += actualGap;
|
|
1398
1448
|
compCopy.layout.yMm = currentPageHeight;
|
|
1399
1449
|
currentPageHeight += compHeightMm;
|
|
1400
1450
|
}
|
|
1401
1451
|
else {
|
|
1402
1452
|
// 同一页:应用 gap
|
|
1403
|
-
currentPageHeight +=
|
|
1453
|
+
currentPageHeight += actualGap;
|
|
1404
1454
|
compCopy.layout.yMm = currentPageHeight;
|
|
1405
1455
|
currentPageHeight += compHeightMm;
|
|
1406
1456
|
}
|
|
@@ -1415,24 +1465,140 @@ class PrintEngine {
|
|
|
1415
1465
|
// 6. 返回分页结果
|
|
1416
1466
|
return pages.length > 0 ? pages : [components];
|
|
1417
1467
|
}
|
|
1468
|
+
/**
|
|
1469
|
+
* 测量表格实际行高(渲染后测量方案)
|
|
1470
|
+
* 将表格渲染到隐藏容器,测量表头、数据行和合计行的实际高度
|
|
1471
|
+
*/
|
|
1472
|
+
async measureTableRowHeights(tableComponent, tableData) {
|
|
1473
|
+
var _a;
|
|
1474
|
+
// 检查是否在浏览器环境
|
|
1475
|
+
if (typeof document === 'undefined') {
|
|
1476
|
+
// 服务器端:使用估算值
|
|
1477
|
+
const baseRowHeight = this.calculateTableRowHeight(tableComponent);
|
|
1478
|
+
return {
|
|
1479
|
+
headerHeight: this.calculateTableHeaderHeight(tableComponent),
|
|
1480
|
+
rowHeights: tableData.map(() => baseRowHeight),
|
|
1481
|
+
summaryHeight: baseRowHeight
|
|
1482
|
+
};
|
|
1483
|
+
}
|
|
1484
|
+
const renderer = this.renderers.get('table');
|
|
1485
|
+
if (!renderer) {
|
|
1486
|
+
const baseRowHeight = this.calculateTableRowHeight(tableComponent);
|
|
1487
|
+
return {
|
|
1488
|
+
headerHeight: this.calculateTableHeaderHeight(tableComponent),
|
|
1489
|
+
rowHeights: tableData.map(() => baseRowHeight),
|
|
1490
|
+
summaryHeight: baseRowHeight
|
|
1491
|
+
};
|
|
1492
|
+
}
|
|
1493
|
+
// 计算与 TableRenderer 一致的表格宽度
|
|
1494
|
+
const context = this.createRenderContext();
|
|
1495
|
+
const xMm = tableComponent.layout.xMm || 0;
|
|
1496
|
+
let tableWidthMm;
|
|
1497
|
+
if (tableComponent.layout.widthMm) {
|
|
1498
|
+
tableWidthMm = tableComponent.layout.widthMm;
|
|
1499
|
+
if (context.pageInfo) {
|
|
1500
|
+
const availableWidth = context.pageInfo.widthMm - context.pageInfo.marginMm.left - context.pageInfo.marginMm.right;
|
|
1501
|
+
const totalOccupied = xMm + tableWidthMm;
|
|
1502
|
+
if (totalOccupied > availableWidth) {
|
|
1503
|
+
tableWidthMm = availableWidth - xMm;
|
|
1504
|
+
}
|
|
1505
|
+
}
|
|
1506
|
+
}
|
|
1507
|
+
else if (context.pageInfo) {
|
|
1508
|
+
const availableWidth = context.pageInfo.widthMm - context.pageInfo.marginMm.left - context.pageInfo.marginMm.right;
|
|
1509
|
+
tableWidthMm = availableWidth - xMm;
|
|
1510
|
+
}
|
|
1511
|
+
else {
|
|
1512
|
+
tableWidthMm = COMPONENT_DEFAULT_SIZE.TABLE_WIDTH;
|
|
1513
|
+
}
|
|
1514
|
+
// 创建隐藏测量容器
|
|
1515
|
+
const measureContainer = document.createElement('div');
|
|
1516
|
+
measureContainer.style.cssText = `
|
|
1517
|
+
position: absolute;
|
|
1518
|
+
visibility: hidden;
|
|
1519
|
+
left: -9999px;
|
|
1520
|
+
top: 0;
|
|
1521
|
+
width: ${tableWidthMm}mm;
|
|
1522
|
+
pointer-events: none;
|
|
1523
|
+
`;
|
|
1524
|
+
// 创建完整的表格组件用于测量(包含合计行)
|
|
1525
|
+
// 使用用户实际的 showHeader 和 bordered 设置,确保测量准确
|
|
1526
|
+
const measureComponent = Object.assign(Object.assign({}, tableComponent), { props: Object.assign(Object.assign({}, tableComponent.props), { _pageData: tableData, _showHeader: ((_a = tableComponent.props) === null || _a === void 0 ? void 0 : _a.showHeader) !== false, _isLastPage: true }) });
|
|
1527
|
+
// 渲染表格
|
|
1528
|
+
const tableHtml = renderer.render(measureComponent, context);
|
|
1529
|
+
measureContainer.innerHTML = `
|
|
1530
|
+
<div style="width: ${tableWidthMm}mm; position: relative;">
|
|
1531
|
+
${tableHtml}
|
|
1532
|
+
</div>
|
|
1533
|
+
`;
|
|
1534
|
+
document.body.appendChild(measureContainer);
|
|
1535
|
+
try {
|
|
1536
|
+
// ✅ 测量表头高度(如果存在)
|
|
1537
|
+
let headerHeight = 0;
|
|
1538
|
+
const headerRow = measureContainer.querySelector('thead tr');
|
|
1539
|
+
if (headerRow) {
|
|
1540
|
+
headerHeight = headerRow.offsetHeight / this.mmToPx;
|
|
1541
|
+
}
|
|
1542
|
+
// 测量数据行高度
|
|
1543
|
+
const rows = measureContainer.querySelectorAll('tbody tr');
|
|
1544
|
+
const rowHeights = [];
|
|
1545
|
+
rows.forEach((row) => {
|
|
1546
|
+
const heightPx = row.offsetHeight;
|
|
1547
|
+
const heightMm = heightPx / this.mmToPx;
|
|
1548
|
+
rowHeights.push(heightMm);
|
|
1549
|
+
});
|
|
1550
|
+
// ✅ 测量合计行高度(如果存在)
|
|
1551
|
+
let summaryHeight = 0;
|
|
1552
|
+
const summaryRow = measureContainer.querySelector('tfoot tr');
|
|
1553
|
+
if (summaryRow) {
|
|
1554
|
+
summaryHeight = summaryRow.offsetHeight / this.mmToPx;
|
|
1555
|
+
}
|
|
1556
|
+
// 如果测量失败,使用估算值
|
|
1557
|
+
if (rowHeights.length === 0) {
|
|
1558
|
+
const baseRowHeight = this.calculateTableRowHeight(tableComponent);
|
|
1559
|
+
return {
|
|
1560
|
+
headerHeight: this.calculateTableHeaderHeight(tableComponent),
|
|
1561
|
+
rowHeights: tableData.map(() => baseRowHeight),
|
|
1562
|
+
summaryHeight: baseRowHeight
|
|
1563
|
+
};
|
|
1564
|
+
}
|
|
1565
|
+
return { headerHeight, rowHeights, summaryHeight };
|
|
1566
|
+
}
|
|
1567
|
+
finally {
|
|
1568
|
+
// 确保无论成功或失败,都清理测量容器
|
|
1569
|
+
if (measureContainer.parentNode) {
|
|
1570
|
+
document.body.removeChild(measureContainer);
|
|
1571
|
+
}
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1418
1574
|
/**
|
|
1419
1575
|
* 表格跨页拆分(基于相对间距)
|
|
1420
|
-
* 支持 repeatHeader
|
|
1576
|
+
* 支持 repeatHeader 配置、渲染后测量、空表格检查
|
|
1421
1577
|
*/
|
|
1422
|
-
splitTableWithGap(tableComponent, tableData, gap, isFirstComponentInPage, availableHeightMm, currentPageHeight, pages, currentPage) {
|
|
1578
|
+
async splitTableWithGap(tableComponent, tableData, gap, isFirstComponentInPage, availableHeightMm, currentPageHeight, pages, currentPage) {
|
|
1423
1579
|
var _a, _b, _c, _d, _e;
|
|
1424
1580
|
// 读取配置:是否重复表头(默认 true)
|
|
1425
1581
|
const repeatHeader = ((_b = (_a = tableComponent.props) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.repeatHeader) !== false;
|
|
1426
|
-
// 使用精确计算的高度
|
|
1427
|
-
const headerHeight = this.calculateTableHeaderHeight(tableComponent);
|
|
1428
|
-
const rowHeight = this.calculateTableRowHeight(tableComponent);
|
|
1429
1582
|
const marginTop = ((_c = this.template.page.marginMm) === null || _c === void 0 ? void 0 : _c.top) || 0;
|
|
1583
|
+
// 记录初始页面数,用于判断表格是否跨页
|
|
1584
|
+
const initialPagesLength = pages.length;
|
|
1430
1585
|
// 空表格检查
|
|
1431
1586
|
if (tableData.length === 0) {
|
|
1432
1587
|
console.info('表格无数据,跳过渲染');
|
|
1433
|
-
return { currentPage, currentPageHeight };
|
|
1588
|
+
return { currentPage, currentPageHeight, isTableSplitAcrossPages: false, lastTableFragmentBottom: currentPageHeight };
|
|
1589
|
+
}
|
|
1590
|
+
// ✅ 渲染后测量:获取表头、数据行和合计行的实际高度
|
|
1591
|
+
let { headerHeight, rowHeights, summaryHeight: measuredSummaryHeight } = await this.measureTableRowHeights(tableComponent, tableData);
|
|
1592
|
+
// 检查测量结果是否有效(防止所有列 hidden 等情况导致长度不一致)
|
|
1593
|
+
if (rowHeights.length !== tableData.length) {
|
|
1594
|
+
console.warn(`[PrintEngine] 表格测量结果异常:rowHeights.length (${rowHeights.length}) != tableData.length (${tableData.length}),` +
|
|
1595
|
+
`可能所有列均为 hidden,使用估算行高继续分页`);
|
|
1596
|
+
// 使用估算行高替换测量结果
|
|
1597
|
+
const fallbackRowHeight = this.calculateTableRowHeight(tableComponent);
|
|
1598
|
+
rowHeights = tableData.map(() => fallbackRowHeight);
|
|
1434
1599
|
}
|
|
1435
1600
|
let remainingData = [...tableData];
|
|
1601
|
+
let remainingRowHeights = [...rowHeights];
|
|
1436
1602
|
let workingPage = [...currentPage];
|
|
1437
1603
|
let workingPageHeight = currentPageHeight;
|
|
1438
1604
|
let isFirstFragment = true;
|
|
@@ -1444,11 +1610,22 @@ class PrintEngine {
|
|
|
1444
1610
|
if (isFirstFragment && !isFirstComponentInPage) {
|
|
1445
1611
|
remainingHeight -= gap;
|
|
1446
1612
|
}
|
|
1447
|
-
// 计算能放多少行
|
|
1448
1613
|
// 如果 repeatHeader = false 且是第一个片段,则表头已经在第一页了,后续页不需要表头
|
|
1449
1614
|
const needHeader = isFirstFragment || repeatHeader;
|
|
1450
|
-
|
|
1451
|
-
|
|
1615
|
+
let availableForRows = remainingHeight - (needHeader ? headerHeight : 0);
|
|
1616
|
+
// ✅ 使用实际测量的行高计算能放多少行
|
|
1617
|
+
let rowsCanFit = 0;
|
|
1618
|
+
let accumulatedHeight = 0;
|
|
1619
|
+
for (let i = 0; i < remainingRowHeights.length; i++) {
|
|
1620
|
+
const rowHeight = remainingRowHeights[i];
|
|
1621
|
+
if (accumulatedHeight + rowHeight <= availableForRows) {
|
|
1622
|
+
accumulatedHeight += rowHeight;
|
|
1623
|
+
rowsCanFit++;
|
|
1624
|
+
}
|
|
1625
|
+
else {
|
|
1626
|
+
break;
|
|
1627
|
+
}
|
|
1628
|
+
}
|
|
1452
1629
|
// 确保至少有 1 行数据(避免只有表头的空页面)
|
|
1453
1630
|
if (rowsCanFit <= 0) {
|
|
1454
1631
|
// 当前页放不下,换页
|
|
@@ -1462,25 +1639,28 @@ class PrintEngine {
|
|
|
1462
1639
|
}
|
|
1463
1640
|
// 取出当前页能放的数据
|
|
1464
1641
|
const dataForThisPage = remainingData.slice(0, rowsCanFit);
|
|
1642
|
+
const rowHeightsForThisPage = remainingRowHeights.slice(0, rowsCanFit);
|
|
1465
1643
|
remainingData = remainingData.slice(rowsCanFit);
|
|
1644
|
+
remainingRowHeights = remainingRowHeights.slice(rowsCanFit);
|
|
1466
1645
|
// 判断是否为最后一页(用于合计行)
|
|
1467
1646
|
const isLastPage = remainingData.length === 0;
|
|
1468
1647
|
// 创建当前页的表格片段
|
|
1469
1648
|
const tableFragmentYMm = isFirstFragment
|
|
1470
1649
|
? (isFirstComponentInPage ? workingPageHeight : workingPageHeight + gap)
|
|
1471
1650
|
: marginTop;
|
|
1472
|
-
const tableFragment = Object.assign(Object.assign({}, tableComponent), { layout: Object.assign(Object.assign({}, tableComponent.layout), { yMm: tableFragmentYMm }), props: Object.assign(Object.assign({}, tableComponent.props), { _pageData: dataForThisPage, _showHeader: needHeader, _isLastPage: isLastPage, _totalData: tableData
|
|
1651
|
+
const tableFragment = Object.assign(Object.assign({}, tableComponent), { layout: Object.assign(Object.assign({}, tableComponent.layout), { yMm: tableFragmentYMm }), props: Object.assign(Object.assign({}, tableComponent.props), { _pageData: dataForThisPage, _showHeader: needHeader, _isLastPage: isLastPage, _totalData: tableData, _rowHeights: rowHeightsForThisPage // 传递实际行高到渲染器
|
|
1473
1652
|
}) });
|
|
1474
1653
|
workingPage.push(tableFragment);
|
|
1475
1654
|
// 计算合计行高度(如果启用合计功能)
|
|
1476
1655
|
const showSummary = ((_d = tableComponent.props) === null || _d === void 0 ? void 0 : _d.showSummary) === true;
|
|
1477
1656
|
const summaryMode = ((_e = tableComponent.props) === null || _e === void 0 ? void 0 : _e.summaryMode) || 'total';
|
|
1478
|
-
const shouldShowSummaryOnThisPage = showSummary && (summaryMode === 'page' ||
|
|
1479
|
-
(summaryMode === 'total' && isLastPage)
|
|
1480
|
-
|
|
1481
|
-
const
|
|
1482
|
-
|
|
1483
|
-
|
|
1657
|
+
const shouldShowSummaryOnThisPage = showSummary && (summaryMode === 'page' ||
|
|
1658
|
+
(summaryMode === 'total' && isLastPage));
|
|
1659
|
+
// ✅ 使用测量的合计行高度,如果没有测量值则使用平均行高
|
|
1660
|
+
const avgRowHeight = rowHeightsForThisPage.reduce((a, b) => a + b, 0) / rowHeightsForThisPage.length;
|
|
1661
|
+
const summaryHeight = shouldShowSummaryOnThisPage ? (measuredSummaryHeight || avgRowHeight) : 0;
|
|
1662
|
+
// 更新当前页高度(使用实际测量的行高累加)
|
|
1663
|
+
const tableFragmentHeight = (needHeader ? headerHeight : 0) + accumulatedHeight + summaryHeight;
|
|
1484
1664
|
if (isFirstFragment && !isFirstComponentInPage) {
|
|
1485
1665
|
workingPageHeight += gap + tableFragmentHeight;
|
|
1486
1666
|
}
|
|
@@ -1495,15 +1675,19 @@ class PrintEngine {
|
|
|
1495
1675
|
isFirstFragment = false;
|
|
1496
1676
|
}
|
|
1497
1677
|
}
|
|
1678
|
+
// 判断表格是否跨页(即是否产生了多个页面片段)
|
|
1679
|
+
const isTableSplitAcrossPages = pages.length > initialPagesLength;
|
|
1498
1680
|
return {
|
|
1499
1681
|
currentPage: workingPage,
|
|
1500
|
-
currentPageHeight: workingPageHeight
|
|
1682
|
+
currentPageHeight: workingPageHeight,
|
|
1683
|
+
isTableSplitAcrossPages, // ✅ 返回表格是否跨页的信息
|
|
1684
|
+
lastTableFragmentBottom: workingPageHeight // ✅ 返回最后一个表格片段的底部位置
|
|
1501
1685
|
};
|
|
1502
1686
|
}
|
|
1503
1687
|
/**
|
|
1504
1688
|
* 生成打印 HTML
|
|
1505
1689
|
*/
|
|
1506
|
-
generatePrintHTML() {
|
|
1690
|
+
async generatePrintHTML() {
|
|
1507
1691
|
var _a, _b, _c, _d;
|
|
1508
1692
|
const { page, components } = this.template;
|
|
1509
1693
|
const { widthMm, heightMm } = this.getPageSize();
|
|
@@ -1532,7 +1716,7 @@ class PrintEngine {
|
|
|
1532
1716
|
});
|
|
1533
1717
|
}
|
|
1534
1718
|
// 标准页面模式:虚拟分页,生成多个独立的页面
|
|
1535
|
-
const pages = this.calculatePages(components);
|
|
1719
|
+
const pages = await this.calculatePages(components);
|
|
1536
1720
|
const totalPages = pages.length;
|
|
1537
1721
|
// 渲染每个页面
|
|
1538
1722
|
const pagesHTML = pages.map((pageComponents, index) => {
|
|
@@ -1565,8 +1749,8 @@ function createPrintEngine(template, data) {
|
|
|
1565
1749
|
/**
|
|
1566
1750
|
* 生成完整打印 HTML
|
|
1567
1751
|
*/
|
|
1568
|
-
generatePrintHTML() {
|
|
1569
|
-
return engine.generatePrintHTML();
|
|
1752
|
+
async generatePrintHTML() {
|
|
1753
|
+
return await engine.generatePrintHTML();
|
|
1570
1754
|
},
|
|
1571
1755
|
/**
|
|
1572
1756
|
* 注册自定义渲染器
|
|
@@ -1665,6 +1849,32 @@ async function waitForPrintResourcesReady(doc, timeout = 10000) {
|
|
|
1665
1849
|
* 提供完整的打印功能封装
|
|
1666
1850
|
* 解耦设计:直接接收模板数据,不依赖模板服务
|
|
1667
1851
|
*/
|
|
1852
|
+
/**
|
|
1853
|
+
* ✅ 使用 DOMParser 提取 HTML body 内容(比正则更健壮)
|
|
1854
|
+
* @param html 完整的 HTML 字符串
|
|
1855
|
+
* @returns body 内的内容,如果解析失败返回 null
|
|
1856
|
+
*/
|
|
1857
|
+
function extractBodyContent(html) {
|
|
1858
|
+
var _a, _b, _c;
|
|
1859
|
+
try {
|
|
1860
|
+
// 使用 DOMParser 解析 HTML
|
|
1861
|
+
const parser = new DOMParser();
|
|
1862
|
+
const doc = parser.parseFromString(html, 'text/html');
|
|
1863
|
+
// 获取 body 内容
|
|
1864
|
+
const bodyContent = (_b = (_a = doc.body) === null || _a === void 0 ? void 0 : _a.innerHTML) === null || _b === void 0 ? void 0 : _b.trim();
|
|
1865
|
+
if (!bodyContent) {
|
|
1866
|
+
console.warn('[PrintSDK] 无法提取 body 内容');
|
|
1867
|
+
return null;
|
|
1868
|
+
}
|
|
1869
|
+
return bodyContent;
|
|
1870
|
+
}
|
|
1871
|
+
catch (error) {
|
|
1872
|
+
console.error('[PrintSDK] 解析 HTML 失败:', error);
|
|
1873
|
+
// 兜底:使用正则提取
|
|
1874
|
+
const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
|
|
1875
|
+
return ((_c = bodyMatch === null || bodyMatch === void 0 ? void 0 : bodyMatch[1]) === null || _c === void 0 ? void 0 : _c.trim()) || null;
|
|
1876
|
+
}
|
|
1877
|
+
}
|
|
1668
1878
|
class PrintSDK {
|
|
1669
1879
|
// 无需配置和缓存,完全解耦
|
|
1670
1880
|
/**
|
|
@@ -1684,7 +1894,7 @@ class PrintSDK {
|
|
|
1684
1894
|
if (!printWindow) {
|
|
1685
1895
|
throw new Error('Failed to open print window. Please check browser settings.');
|
|
1686
1896
|
}
|
|
1687
|
-
const html = engine.generatePrintHTML();
|
|
1897
|
+
const html = await engine.generatePrintHTML();
|
|
1688
1898
|
printWindow.document.write(html);
|
|
1689
1899
|
printWindow.document.close();
|
|
1690
1900
|
// 等待所有图片加载完成后再打印
|
|
@@ -1698,7 +1908,7 @@ class PrintSDK {
|
|
|
1698
1908
|
iframe.style.top = '-9999px';
|
|
1699
1909
|
iframe.style.left = '-9999px';
|
|
1700
1910
|
document.body.appendChild(iframe);
|
|
1701
|
-
const html = engine.generatePrintHTML();
|
|
1911
|
+
const html = await engine.generatePrintHTML();
|
|
1702
1912
|
const iframeDoc = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
|
|
1703
1913
|
if (!iframeDoc) {
|
|
1704
1914
|
throw new Error('Failed to access iframe document');
|
|
@@ -1708,11 +1918,25 @@ class PrintSDK {
|
|
|
1708
1918
|
// 等待所有图片加载完成后再打印
|
|
1709
1919
|
// 注意:二维码和条形码已同步生成为base64,主要等待外部图片资源
|
|
1710
1920
|
await waitForImagesLoaded(iframeDoc);
|
|
1921
|
+
// ✅ 监听打印完成事件后再移除 iframe
|
|
1922
|
+
const cleanup = () => {
|
|
1923
|
+
if (iframe.parentNode) {
|
|
1924
|
+
document.body.removeChild(iframe);
|
|
1925
|
+
}
|
|
1926
|
+
};
|
|
1927
|
+
// 优先使用 afterprint 事件(现代浏览器支持)
|
|
1928
|
+
if (iframe.contentWindow) {
|
|
1929
|
+
iframe.contentWindow.addEventListener('afterprint', cleanup, { once: true });
|
|
1930
|
+
}
|
|
1931
|
+
// 触发打印
|
|
1711
1932
|
(_b = iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.print();
|
|
1712
|
-
//
|
|
1933
|
+
// 兜底:如果 afterprint 事件未触发(如用户取消打印),5秒后清理
|
|
1713
1934
|
setTimeout(() => {
|
|
1714
|
-
|
|
1715
|
-
|
|
1935
|
+
if (iframe.parentNode) {
|
|
1936
|
+
console.warn('[PrintSDK] afterprint 事件未触发,执行兜底清理');
|
|
1937
|
+
cleanup();
|
|
1938
|
+
}
|
|
1939
|
+
}, 5000);
|
|
1716
1940
|
}
|
|
1717
1941
|
}
|
|
1718
1942
|
/**
|
|
@@ -1739,7 +1963,7 @@ class PrintSDK {
|
|
|
1739
1963
|
*/
|
|
1740
1964
|
async generateHTML(template, data) {
|
|
1741
1965
|
const engine = createPrintEngine(template, data);
|
|
1742
|
-
return engine.generatePrintHTML();
|
|
1966
|
+
return await engine.generatePrintHTML();
|
|
1743
1967
|
}
|
|
1744
1968
|
/**
|
|
1745
1969
|
* 批量打印(同模板多数据)
|
|
@@ -1768,11 +1992,11 @@ class PrintSDK {
|
|
|
1768
1992
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(progress);
|
|
1769
1993
|
try {
|
|
1770
1994
|
const engine = createPrintEngine(template, data);
|
|
1771
|
-
const html = engine.generatePrintHTML();
|
|
1772
|
-
// 提取 <body>
|
|
1773
|
-
const
|
|
1774
|
-
if (
|
|
1775
|
-
allPagesHTML.push(
|
|
1995
|
+
const html = await engine.generatePrintHTML();
|
|
1996
|
+
// ✅ 提取 <body> 标签中的内容(使用 DOMParser 代替正则,更健壮)
|
|
1997
|
+
const bodyContent = extractBodyContent(html);
|
|
1998
|
+
if (bodyContent) {
|
|
1999
|
+
allPagesHTML.push(bodyContent);
|
|
1776
2000
|
}
|
|
1777
2001
|
progress.completed++;
|
|
1778
2002
|
onProgress === null || onProgress === void 0 ? void 0 : onProgress(progress);
|