@veltra/sheet 2.3.3 → 2.4.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/dist/components/report/binding-badge.js +23 -5
- package/dist/components/report/designer/drill-dialog.js +258 -0
- package/dist/components/report/designer/float-panel.js +26 -14
- package/dist/components/report/print.js +39 -0
- package/dist/components/report/report-designer.js +56 -21
- package/dist/components/report/report-viewer.js +173 -44
- package/dist/components/report/style2.css +91 -0
- package/dist/components/report/use-report-designer.js +2 -1
- package/dist/components/report/use-report-viewer.js +88 -3
- package/dist/components/sheet/insert-image.js +1 -1
- package/dist/components/sheet/popups/import.worker.js +2 -3
- package/dist/components/sheet/use-sheet-state.js +2 -2
- package/dist/index.d.ts +5 -3
- package/dist/index.js +4 -2
- package/dist/report/drill.d.ts +48 -0
- package/dist/report/drill.js +78 -0
- package/dist/report/export-xlsx.d.ts +3 -7
- package/dist/report/export-xlsx.js +6 -85
- package/dist/report/index.d.ts +5 -3
- package/dist/report/print.d.ts +23 -0
- package/dist/report/print.js +197 -0
- package/dist/report/render/aggregate.js +25 -1
- package/dist/report/types.d.ts +19 -1
- package/dist/tools/download.js +2 -2
- package/dist/types/report-designer.d.ts +13 -0
- package/dist/types/report-viewer.d.ts +19 -0
- package/package.json +6 -9
- package/src/components/report/__test__/binding-badge.test.ts +92 -0
- package/src/components/report/__test__/report-designer.test.ts +98 -3
- package/src/components/report/__test__/report-drill.test.ts +692 -0
- package/src/components/report/__test__/report-viewer.test.ts +43 -0
- package/src/components/report/__test__/use-report-designer.test.ts +108 -1
- package/src/components/report/binding-badge.ts +35 -5
- package/src/components/report/designer/drill-dialog.vue +245 -0
- package/src/components/report/designer/float-panel.vue +12 -0
- package/src/components/report/print.ts +44 -0
- package/src/components/report/report-designer.vue +35 -2
- package/src/components/report/report-viewer.vue +171 -18
- package/src/components/report/style-designer.scss +66 -0
- package/src/components/report/style-viewer.scss +40 -0
- package/src/components/report/use-report-designer.ts +8 -1
- package/src/components/report/use-report-viewer.ts +150 -11
- package/src/components/sheet/insert-image.ts +1 -1
- package/src/components/sheet/popups/export-popup.vue +1 -1
- package/src/components/sheet/popups/import.worker.ts +7 -10
- package/src/components/sheet/use-sheet-state.ts +2 -2
- package/src/report/__test__/drill.test.ts +194 -0
- package/src/report/__test__/export-xlsx.test.ts +3 -25
- package/src/report/__test__/print.test.ts +170 -0
- package/src/report/__test__/render.test.ts +26 -0
- package/src/report/drill.ts +112 -0
- package/src/report/export-xlsx.ts +5 -103
- package/src/report/index.ts +4 -1
- package/src/report/print.ts +234 -0
- package/src/report/render/aggregate.ts +28 -0
- package/src/report/types.ts +20 -0
- package/src/tools/__test__/builtin.test.ts +1 -1
- package/src/tools/download.ts +2 -2
- package/src/tools/export.worker.ts +2 -2
- package/src/types/report-designer.ts +18 -1
- package/src/types/report-viewer.ts +18 -1
|
@@ -1,113 +1,15 @@
|
|
|
1
1
|
import type { Sheet } from '@veltra/sheet-core'
|
|
2
|
-
import {
|
|
3
|
-
import type { Cell, CellValue, ColumnDef, RowDef, WriteSheet } from 'hucre'
|
|
4
|
-
import { writeXlsx } from 'hucre/xlsx'
|
|
2
|
+
import { exportSheetXlsx } from '@veltra/sheet-core/core/io/export'
|
|
5
3
|
|
|
6
4
|
/** 列宽条目:模型列索引 → 像素宽(与 SheetSnapshot.colWidths 同构) */
|
|
7
5
|
export type ReportColWidthEntry = readonly [number, number]
|
|
8
6
|
|
|
9
|
-
/** 像素 → Excel points */
|
|
10
|
-
function pxToPt(px: number): number {
|
|
11
|
-
return px * 0.75
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/** VTable 像素列宽 → Excel 字符宽度(近似换算) */
|
|
15
|
-
export function pxToExcelColWidth(px: number): number {
|
|
16
|
-
return Math.max(1, Math.round((px - 5) / 7))
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/** 从列宽条目构建 hucre ColumnDef */
|
|
20
|
-
export function buildColumnDefs(colWidths: ReadonlyArray<ReportColWidthEntry>): ColumnDef[] {
|
|
21
|
-
if (colWidths.length === 0) return []
|
|
22
|
-
const maxCol = Math.max(...colWidths.map(([col]) => col))
|
|
23
|
-
const columns: ColumnDef[] = Array.from({ length: maxCol + 1 }, () => ({}))
|
|
24
|
-
for (const [col, width] of colWidths) {
|
|
25
|
-
columns[col] = { width: pxToExcelColWidth(width) }
|
|
26
|
-
}
|
|
27
|
-
return columns
|
|
28
|
-
}
|
|
29
|
-
|
|
30
7
|
/**
|
|
31
|
-
* 将已填充的 Sheet(Filled Report)导出为保真 XLSX(合并 / 样式 / 行高 /
|
|
8
|
+
* 将已填充的 Sheet(Filled Report)导出为保真 XLSX(合并 / 样式 / 行高 / 列宽 / 浮动图)。
|
|
9
|
+
* 组装与序列化委托 sheet-core `exportSheetXlsx`(与 `exportWorkbookXlsx` 同一套单表逻辑);
|
|
32
10
|
* 条件样式颜色已在 renderReport 展开阶段打平进 StylePool(ADR-0001 决策 2)。
|
|
33
11
|
* 列宽取自 sheet 模型(`getColWidths`)。
|
|
34
12
|
*/
|
|
35
|
-
export
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
let maxRow = -1
|
|
39
|
-
let maxCol = -1
|
|
40
|
-
for (const [addr] of sheet.store.entries()) {
|
|
41
|
-
if (addr.row > maxRow) maxRow = addr.row
|
|
42
|
-
if (addr.col > maxCol) maxCol = addr.col
|
|
43
|
-
}
|
|
44
|
-
for (const [row] of sheet.getRowHeights()) {
|
|
45
|
-
if (row > maxRow) maxRow = row
|
|
46
|
-
}
|
|
47
|
-
for (const [col] of widths) {
|
|
48
|
-
if (col > maxCol) maxCol = col
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const rows =
|
|
52
|
-
maxRow < 0
|
|
53
|
-
? []
|
|
54
|
-
: Array.from({ length: maxRow + 1 }, () =>
|
|
55
|
-
Array.from({ length: maxCol + 1 }, () => null as CellValue)
|
|
56
|
-
)
|
|
57
|
-
const cells = new Map<string, Partial<Cell>>()
|
|
58
|
-
|
|
59
|
-
for (const [addr, data] of sheet.store.entries()) {
|
|
60
|
-
const row = rows[addr.row]!
|
|
61
|
-
const key = `${addr.row},${addr.col}`
|
|
62
|
-
const cell: Partial<Cell> = {}
|
|
63
|
-
const style = sheet.getEffectiveStyle(addr)
|
|
64
|
-
if (style) cell.style = styleToHucre(style)
|
|
65
|
-
if (data.f != null && data.f !== '') {
|
|
66
|
-
cell.formula = data.f
|
|
67
|
-
if (data.v != null) cell.formulaResult = data.v as CellValue
|
|
68
|
-
row[addr.col] = (data.v as CellValue) ?? null
|
|
69
|
-
cells.set(key, cell)
|
|
70
|
-
continue
|
|
71
|
-
}
|
|
72
|
-
if (data.t === 'e') {
|
|
73
|
-
cell.value = data.v as string
|
|
74
|
-
cell.type = 'error'
|
|
75
|
-
row[addr.col] = null
|
|
76
|
-
cells.set(key, cell)
|
|
77
|
-
continue
|
|
78
|
-
}
|
|
79
|
-
if (data.t === 'd') {
|
|
80
|
-
cell.value = data.v as number
|
|
81
|
-
cell.type = 'number'
|
|
82
|
-
cell.style = { ...cell.style, numFmt: 'yyyy-mm-dd' }
|
|
83
|
-
row[addr.col] = null
|
|
84
|
-
cells.set(key, cell)
|
|
85
|
-
continue
|
|
86
|
-
}
|
|
87
|
-
row[addr.col] = (data.v as CellValue) ?? null
|
|
88
|
-
if (Object.keys(cell).length > 0) cells.set(key, cell)
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const writeSheet: WriteSheet = {
|
|
92
|
-
name: sheet.name || '报表',
|
|
93
|
-
rows,
|
|
94
|
-
...(cells.size > 0 ? { cells } : {}),
|
|
95
|
-
...(sheet.merges.size > 0
|
|
96
|
-
? { merges: sheet.merges.getMerges().map((range) => rangeToHucre(range)) }
|
|
97
|
-
: {}),
|
|
98
|
-
...(widths.length > 0 ? { columns: buildColumnDefs(widths) } : {})
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
const frozen = sheet.frozen
|
|
102
|
-
if (frozen.rows > 0 || frozen.cols > 0) {
|
|
103
|
-
writeSheet.freezePane = { rows: frozen.rows, columns: frozen.cols }
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
const rowDefs = new Map<number, RowDef>()
|
|
107
|
-
for (const [row, height] of sheet.getRowHeights()) {
|
|
108
|
-
rowDefs.set(row, { height: pxToPt(height) })
|
|
109
|
-
}
|
|
110
|
-
if (rowDefs.size > 0) writeSheet.rowDefs = rowDefs
|
|
111
|
-
|
|
112
|
-
return writeXlsx({ sheets: [writeSheet], activeSheet: 0 })
|
|
13
|
+
export function exportFilledReportXlsx(sheet: Sheet): Promise<Uint8Array> {
|
|
14
|
+
return exportSheetXlsx(sheet, { fallbackName: '报表' })
|
|
113
15
|
}
|
package/src/report/index.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// 报表纯 TS 内核(ADR-0003 决策 1):渲染引擎 / 绑定 / 条件规则 / 查询参数 / 数据连接器 /
|
|
2
|
-
// Report Template(自包含模板与取数)/ Filter Bar
|
|
2
|
+
// Report Template(自包含模板与取数)/ Filter Bar 值规范化 / 下钻配置与下钻栈 /
|
|
3
|
+
// Filled Report XLSX 导出与打印 HTML。
|
|
3
4
|
// 框架无关、无 DOM 依赖;组件壳(UReportDesigner / UReportViewer)落 components/report/。
|
|
4
5
|
|
|
5
6
|
export * from './types'
|
|
@@ -10,4 +11,6 @@ export * from './render'
|
|
|
10
11
|
export * from './connector'
|
|
11
12
|
export * from './template'
|
|
12
13
|
export * from './filter-bar'
|
|
14
|
+
export * from './drill'
|
|
13
15
|
export * from './export-xlsx'
|
|
16
|
+
export * from './print'
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
BorderLineStyle,
|
|
3
|
+
CellStyle,
|
|
4
|
+
Sheet,
|
|
5
|
+
SheetImage,
|
|
6
|
+
SheetImageType
|
|
7
|
+
} from '@veltra/sheet-core'
|
|
8
|
+
import { BORDER_SIDES } from '@veltra/sheet-core'
|
|
9
|
+
|
|
10
|
+
/** 报表打印选项 */
|
|
11
|
+
export interface ReportPrintOptions {
|
|
12
|
+
/** 打印文档标题(打印对话框标题 / 另存 PDF 文件名);缺省取 sheet 名,再回落「报表」 */
|
|
13
|
+
title?: string
|
|
14
|
+
/** 纸张方向(@page size),默认 portrait */
|
|
15
|
+
orientation?: 'portrait' | 'landscape'
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* 默认列宽 / 行高(px):与 grid 层 vtable-theme 的
|
|
20
|
+
* SHEET_DEFAULT_COL_WIDTH / SHEET_DEFAULT_ROW_HEIGHT 对齐;
|
|
21
|
+
* report 内核保持 headless,不引 grid 入口。
|
|
22
|
+
*/
|
|
23
|
+
const PRINT_DEFAULT_COL_WIDTH = 80
|
|
24
|
+
const PRINT_DEFAULT_ROW_HEIGHT = 28
|
|
25
|
+
|
|
26
|
+
const IMAGE_MIME: Record<SheetImageType, string> = {
|
|
27
|
+
png: 'image/png',
|
|
28
|
+
jpeg: 'image/jpeg',
|
|
29
|
+
gif: 'image/gif',
|
|
30
|
+
svg: 'image/svg+xml',
|
|
31
|
+
webp: 'image/webp'
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/** 模型边框线型 → CSS 线型(thin/medium/thick 为实线粗细分级,宽度由 edge.width 表达) */
|
|
35
|
+
const BORDER_CSS_LINE: Record<BorderLineStyle, string> = {
|
|
36
|
+
thin: 'solid',
|
|
37
|
+
medium: 'solid',
|
|
38
|
+
thick: 'solid',
|
|
39
|
+
dashed: 'dashed',
|
|
40
|
+
dotted: 'dotted'
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function escapeHtml(text: string): string {
|
|
44
|
+
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function escapeAttr(text: string): string {
|
|
48
|
+
return escapeHtml(text).replace(/"/g, '"')
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/** Uint8Array → base64(分块避免栈溢出;btoa 在浏览器 / Node >=16 / Bun / happy-dom 均可用) */
|
|
52
|
+
function bytesToBase64(data: Uint8Array): string {
|
|
53
|
+
let binary = ''
|
|
54
|
+
const CHUNK = 0x8000
|
|
55
|
+
for (let i = 0; i < data.length; i += CHUNK) {
|
|
56
|
+
binary += String.fromCharCode(...data.subarray(i, i + CHUNK))
|
|
57
|
+
}
|
|
58
|
+
return btoa(binary)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/** 模型有效样式 → td 内联 CSS(字号 pt 直出,与屏幕 px ×4/3 物理尺寸一致) */
|
|
62
|
+
function styleToCss(style: CellStyle): string {
|
|
63
|
+
const decls: string[] = []
|
|
64
|
+
if (style.fill?.color) decls.push(`background-color:${style.fill.color}`)
|
|
65
|
+
for (const side of BORDER_SIDES) {
|
|
66
|
+
const edge = style.border?.[side]
|
|
67
|
+
if (edge)
|
|
68
|
+
decls.push(`border-${side}:${edge.width}px ${BORDER_CSS_LINE[edge.style]} ${edge.color}`)
|
|
69
|
+
}
|
|
70
|
+
const font = style.font
|
|
71
|
+
if (font) {
|
|
72
|
+
if (font.color) decls.push(`color:${font.color}`)
|
|
73
|
+
if (font.bold) decls.push('font-weight:bold')
|
|
74
|
+
if (font.italic) decls.push('font-style:italic')
|
|
75
|
+
const decoration = [font.underline ? 'underline' : '', font.strikethrough ? 'line-through' : '']
|
|
76
|
+
.filter(Boolean)
|
|
77
|
+
.join(' ')
|
|
78
|
+
if (decoration) decls.push(`text-decoration:${decoration}`)
|
|
79
|
+
if (typeof font.size === 'number') decls.push(`font-size:${font.size}pt`)
|
|
80
|
+
}
|
|
81
|
+
const align = style.align
|
|
82
|
+
if (align) {
|
|
83
|
+
if (align.horizontal) decls.push(`text-align:${align.horizontal}`)
|
|
84
|
+
if (align.vertical) decls.push(`vertical-align:${align.vertical}`)
|
|
85
|
+
if (align.wrap) decls.push('white-space:normal;word-break:break-all')
|
|
86
|
+
}
|
|
87
|
+
return decls.join(';')
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
interface PrintImageRect {
|
|
91
|
+
left: number
|
|
92
|
+
top: number
|
|
93
|
+
width?: number
|
|
94
|
+
height?: number
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* 浮动图打印定位(镜像 grid image-layer `computeImageRect`):
|
|
99
|
+
* left/top = from 格左上 + 格内像素偏移;宽高优先 image.width/height(两者都有才用),
|
|
100
|
+
* 缺失且有 to 时按 from→to 跨度兜底,都缺失则省略尺寸(浏览器取自然尺寸)。
|
|
101
|
+
*/
|
|
102
|
+
function computePrintImageRect(
|
|
103
|
+
image: SheetImage,
|
|
104
|
+
colWidths: readonly number[],
|
|
105
|
+
rowHeights: readonly number[]
|
|
106
|
+
): PrintImageRect {
|
|
107
|
+
const { from, to } = image.anchor
|
|
108
|
+
let left = from.offsetX ?? 0
|
|
109
|
+
for (let c = 0; c < from.col; c++) left += colWidths[c] ?? PRINT_DEFAULT_COL_WIDTH
|
|
110
|
+
let top = from.offsetY ?? 0
|
|
111
|
+
for (let r = 0; r < from.row; r++) top += rowHeights[r] ?? PRINT_DEFAULT_ROW_HEIGHT
|
|
112
|
+
|
|
113
|
+
if (image.width != null && image.height != null) {
|
|
114
|
+
return { left, top, width: image.width, height: image.height }
|
|
115
|
+
}
|
|
116
|
+
if (to) {
|
|
117
|
+
let width = 0
|
|
118
|
+
for (let c = from.col; c <= to.col; c++) width += colWidths[c] ?? PRINT_DEFAULT_COL_WIDTH
|
|
119
|
+
let height = 0
|
|
120
|
+
for (let r = from.row; r <= to.row; r++) height += rowHeights[r] ?? PRINT_DEFAULT_ROW_HEIGHT
|
|
121
|
+
return { left, top, width, height }
|
|
122
|
+
}
|
|
123
|
+
return { left, top }
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* 将已填充的 Sheet(Filled Report)构建为打印专用 HTML 文档(纯 TS、headless、无 DOM)。
|
|
128
|
+
*
|
|
129
|
+
* 路线说明:网格渲染层是 canvas + 虚拟滚动(视口外不绘制),无法直接 window.print;
|
|
130
|
+
* 这里从模型单一事实源(与 exportFilledReportXlsx 同一读取路径)重建 `<table>`——
|
|
131
|
+
* 矢量文字清晰、浏览器原生分页、合并格天然映射 rowspan/colspan。
|
|
132
|
+
*
|
|
133
|
+
* 保真范围:值 / 合并 / 有效样式(fill + border + font + align/wrap,条件样式已在
|
|
134
|
+
* 展开阶段打平进 StylePool)/ 行高 / 列宽 / 浮动图(data URL 内嵌,跨页被裁剪属预期)。
|
|
135
|
+
* 与 Excel 默认一致:不打印屏幕网格线(仅模型显式边框)。
|
|
136
|
+
*/
|
|
137
|
+
export function buildFilledReportPrintHtml(sheet: Sheet, options?: ReportPrintOptions): string {
|
|
138
|
+
const title = options?.title ?? sheet.name ?? ''
|
|
139
|
+
const orientation = options?.orientation ?? 'portrait'
|
|
140
|
+
|
|
141
|
+
// 打印范围 = 数据 ∪ 行高 ∪ 列宽 ∪ 合并 ∪ 图片锚点 包围盒(与 xlsx 导出收敛逻辑一致 + 合并/图片)
|
|
142
|
+
let maxRow = -1
|
|
143
|
+
let maxCol = -1
|
|
144
|
+
const grow = (row: number, col: number): void => {
|
|
145
|
+
if (row > maxRow) maxRow = row
|
|
146
|
+
if (col > maxCol) maxCol = col
|
|
147
|
+
}
|
|
148
|
+
for (const [addr] of sheet.store.peekEntries()) grow(addr.row, addr.col)
|
|
149
|
+
for (const [row] of sheet.getRowHeights()) grow(row, 0)
|
|
150
|
+
for (const [col] of sheet.getColWidths()) grow(0, col)
|
|
151
|
+
const merges = sheet.merges.getMerges()
|
|
152
|
+
for (const range of merges) grow(range.end.row, range.end.col)
|
|
153
|
+
const images = sheet.getImages()
|
|
154
|
+
for (const image of images) {
|
|
155
|
+
grow(image.anchor.from.row, image.anchor.from.col)
|
|
156
|
+
if (image.anchor.to) grow(image.anchor.to.row, image.anchor.to.col)
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
const colWidths: number[] = []
|
|
160
|
+
for (let c = 0; c <= maxCol; c++) colWidths.push(sheet.getColWidth(c) ?? PRINT_DEFAULT_COL_WIDTH)
|
|
161
|
+
const rowHeights: number[] = []
|
|
162
|
+
for (let r = 0; r <= maxRow; r++)
|
|
163
|
+
rowHeights.push(sheet.getRowHeight(r) ?? PRINT_DEFAULT_ROW_HEIGHT)
|
|
164
|
+
|
|
165
|
+
// 合并:锚点 → 跨度;被覆盖格集合(跳过客格)
|
|
166
|
+
const spanByAnchor = new Map<string, { rowSpan: number; colSpan: number }>()
|
|
167
|
+
const covered = new Set<string>()
|
|
168
|
+
for (const range of merges) {
|
|
169
|
+
const rowSpan = range.end.row - range.start.row + 1
|
|
170
|
+
const colSpan = range.end.col - range.start.col + 1
|
|
171
|
+
spanByAnchor.set(`${range.start.row},${range.start.col}`, { rowSpan, colSpan })
|
|
172
|
+
for (let r = range.start.row; r <= range.end.row; r++) {
|
|
173
|
+
for (let c = range.start.col; c <= range.end.col; c++) {
|
|
174
|
+
if (r !== range.start.row || c !== range.start.col) covered.add(`${r},${c}`)
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
const css = [
|
|
180
|
+
`@page { size: A4 ${orientation}; margin: 12mm; }`,
|
|
181
|
+
'html, body { margin: 0; padding: 0; }',
|
|
182
|
+
"body { font-family: Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-size: 12px; color: #1f2329; -webkit-print-color-adjust: exact; print-color-adjust: exact; }",
|
|
183
|
+
'.sheet-print-root { position: relative; }',
|
|
184
|
+
'table { border-collapse: collapse; table-layout: fixed; }',
|
|
185
|
+
'tr { break-inside: avoid; }',
|
|
186
|
+
'td { box-sizing: border-box; padding: 2px 6px; overflow: hidden; white-space: nowrap; vertical-align: middle; text-align: left; }',
|
|
187
|
+
'.sheet-print-root img { position: absolute; }'
|
|
188
|
+
].join('\n')
|
|
189
|
+
|
|
190
|
+
const parts: string[] = []
|
|
191
|
+
parts.push('<!doctype html><html><head><meta charset="utf-8">')
|
|
192
|
+
parts.push(`<title>${escapeHtml(title || '报表')}</title>`)
|
|
193
|
+
parts.push(`<style>\n${css}\n</style></head><body>`)
|
|
194
|
+
parts.push('<div class="sheet-print-root">')
|
|
195
|
+
parts.push('<table>')
|
|
196
|
+
if (colWidths.length > 0) {
|
|
197
|
+
parts.push('<colgroup>')
|
|
198
|
+
for (const width of colWidths) parts.push(`<col style="width:${width}px">`)
|
|
199
|
+
parts.push('</colgroup>')
|
|
200
|
+
}
|
|
201
|
+
for (let r = 0; r <= maxRow; r++) {
|
|
202
|
+
parts.push(`<tr style="height:${rowHeights[r]}px">`)
|
|
203
|
+
for (let c = 0; c <= maxCol; c++) {
|
|
204
|
+
if (covered.has(`${r},${c}`)) continue
|
|
205
|
+
const attrs: string[] = []
|
|
206
|
+
const span = spanByAnchor.get(`${r},${c}`)
|
|
207
|
+
if (span && span.colSpan > 1) attrs.push(`colspan="${span.colSpan}"`)
|
|
208
|
+
if (span && span.rowSpan > 1) attrs.push(`rowspan="${span.rowSpan}"`)
|
|
209
|
+
const style = sheet.getEffectiveStyle({ row: r, col: c })
|
|
210
|
+
const cellCss = style ? styleToCss(style) : ''
|
|
211
|
+
if (cellCss) attrs.push(`style="${escapeAttr(cellCss)}"`)
|
|
212
|
+
const value = sheet.getDisplayValue({ row: r, col: c })
|
|
213
|
+
const text = value == null ? '' : escapeHtml(String(value))
|
|
214
|
+
parts.push(`<td${attrs.length > 0 ? ` ${attrs.join(' ')}` : ''}>${text}</td>`)
|
|
215
|
+
}
|
|
216
|
+
parts.push('</tr>')
|
|
217
|
+
}
|
|
218
|
+
parts.push('</table>')
|
|
219
|
+
|
|
220
|
+
for (const image of images) {
|
|
221
|
+
const rect = computePrintImageRect(image, colWidths, rowHeights)
|
|
222
|
+
const size =
|
|
223
|
+
rect.width != null && rect.height != null
|
|
224
|
+
? `width:${rect.width}px;height:${rect.height}px;`
|
|
225
|
+
: ''
|
|
226
|
+
const src = `data:${IMAGE_MIME[image.type]};base64,${bytesToBase64(image.data)}`
|
|
227
|
+
parts.push(
|
|
228
|
+
`<img src="${src}" style="left:${rect.left}px;top:${rect.top}px;${size}" alt="${escapeAttr(image.altText ?? '')}">`
|
|
229
|
+
)
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
parts.push('</div></body></html>')
|
|
233
|
+
return parts.join('')
|
|
234
|
+
}
|
|
@@ -259,3 +259,31 @@ export function resolvePlacementRecord(
|
|
|
259
259
|
const rows = aggregateIndex.rowsFor(binding.dataset, filter)
|
|
260
260
|
return rows[placement.listIndex]
|
|
261
261
|
}
|
|
262
|
+
|
|
263
|
+
/**
|
|
264
|
+
* 解析落点的上下文记录(下钻字段映射用):
|
|
265
|
+
* `list` 明细取源数据行;分组/汇总格取祖先分组过滤值合成的上下文
|
|
266
|
+
* (分组格含自身分组值,如地区分组格 → `{ region: '华东' }`;
|
|
267
|
+
* 汇总聚合格如 sum/avg/count/max/min 也将本格聚合计算值并入上下文,如 `{ region: '华东', total: 300 }`)。
|
|
268
|
+
*/
|
|
269
|
+
export function resolvePlacementContext(
|
|
270
|
+
placement: PhysicalPlacement,
|
|
271
|
+
index: TemplateIndex,
|
|
272
|
+
data: DatasetRecords,
|
|
273
|
+
aggregateIndex: AggregateIndex
|
|
274
|
+
): Record<string, unknown> | undefined {
|
|
275
|
+
const binding = placement.binding
|
|
276
|
+
if (!binding) return undefined
|
|
277
|
+
if (binding.aggregate === 'list') {
|
|
278
|
+
return resolvePlacementRecord(placement, index, data, aggregateIndex)
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
const filter = resolveAncestorFilters(binding, placement, index, data)
|
|
282
|
+
if (binding.aggregate === 'group') {
|
|
283
|
+
const value = filter[binding.field] ?? resolveOwnGroupValue(binding, placement, index, data)
|
|
284
|
+
return value === undefined ? filter : { ...filter, [binding.field]: value }
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
const value = resolvePlacementValue(placement, index, data, aggregateIndex)
|
|
288
|
+
return value === undefined ? filter : { ...filter, [binding.field]: value }
|
|
289
|
+
}
|
package/src/report/types.ts
CHANGED
|
@@ -30,6 +30,24 @@ export interface ConditionalRule {
|
|
|
30
30
|
scope?: 'cell' | 'row'
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
/** 绑定格下钻配置(存于 Cell Meta namespace `report`,随绑定序列化;旧查看器忽略该字段) */
|
|
34
|
+
export interface ReportDrillConfig {
|
|
35
|
+
/** 目标模板引用(宿主模板列表项的 ref,不支持手填) */
|
|
36
|
+
target: string
|
|
37
|
+
/** 字段 → 详情报参数映射:源记录字段名 → 目标报表 Filter Bar 参数 id */
|
|
38
|
+
mapping: Record<string, string>
|
|
39
|
+
/** 打开方式:查看器内切换 | UDialog 弹框 */
|
|
40
|
+
openMode: 'switch' | 'dialog'
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/** 宿主提供的可下钻模板列表项(设计器下拉与查看器 resolveTemplate 契约共用) */
|
|
44
|
+
export interface ReportTemplateListItem {
|
|
45
|
+
/** 模板引用,作为下钻 target 并传给宿主 resolveTemplate */
|
|
46
|
+
ref: string
|
|
47
|
+
/** 可读名,用于设计器下拉展示 */
|
|
48
|
+
label: string
|
|
49
|
+
}
|
|
50
|
+
|
|
33
51
|
/** 设计格上的报表绑定(存于 Cell Meta namespace `report`) */
|
|
34
52
|
export interface ReportBinding {
|
|
35
53
|
dataset: string
|
|
@@ -48,6 +66,8 @@ export interface ReportBinding {
|
|
|
48
66
|
conditionalRules?: ConditionalRule[]
|
|
49
67
|
/** 设计器预设;引擎不读 */
|
|
50
68
|
preset?: ReportPreset
|
|
69
|
+
/** 下钻配置;缺省不可下钻 */
|
|
70
|
+
drill?: ReportDrillConfig
|
|
51
71
|
}
|
|
52
72
|
|
|
53
73
|
/**
|
|
@@ -122,7 +122,7 @@ describe('内置工具(dogfood 扩展机制)', () => {
|
|
|
122
122
|
}
|
|
123
123
|
})
|
|
124
124
|
|
|
125
|
-
it('导出 xlsx:sheet 名含 Excel 非法字符时 reject(
|
|
125
|
+
it('导出 xlsx:sheet 名含 Excel 非法字符时 reject(sheet-core 写入校验,错误传播给调用方)', async () => {
|
|
126
126
|
const workbook = new Workbook()
|
|
127
127
|
workbook.renameSheet('Sheet1', 'a:b')
|
|
128
128
|
const ctx = createSheetContext(workbook.activeSheet, workbook)
|
package/src/tools/download.ts
CHANGED
|
@@ -6,7 +6,7 @@ import type { SheetContext } from './context'
|
|
|
6
6
|
import type { ExportWorkerPayload, ExportWorkerResponse } from './export.worker'
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* 大工作簿的 XLSX 导出(
|
|
9
|
+
* 大工作簿的 XLSX 导出(sheet-core 序列化 + ZIP 压缩为秒级同步重活)移入 Web Worker:
|
|
10
10
|
* 主线程只采集快照(结构化克隆友好的纯数据,行高随 SheetSnapshot.rowHeights
|
|
11
11
|
* 携带),序列化与压缩在 worker 线程进行。worker 不可用(极端环境 / 打包产物
|
|
12
12
|
* 缺文件)回退主线程导出——与导入侧 parseXlsxAsync 同一模式。
|
|
@@ -55,7 +55,7 @@ async function exportWorkbookXlsxAsync(workbook: Workbook): Promise<Uint8Array>
|
|
|
55
55
|
/**
|
|
56
56
|
* 导出当前工作簿为 .xlsx(无 workbook 时空操作)。
|
|
57
57
|
* 下载动作复用 @cat-kit/fe 的 saveBlob(#28:不再自研 Object URL + a.click)。
|
|
58
|
-
*
|
|
58
|
+
* 导出侧 sheet-core 的 writeXlsx 会校验 sheet 名(Excel 非法字符 / 超长 / 保留名)并抛
|
|
59
59
|
* InvalidArgumentError——失败经返回的 Promise 传播,调用方(导出面板)负责提示。
|
|
60
60
|
*/
|
|
61
61
|
export async function exportWorkbookFile(ctx: SheetContext): Promise<void> {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference lib="webworker" />
|
|
2
2
|
/**
|
|
3
|
-
* XLSX 导出 Worker:exportWorkbookXlsx
|
|
3
|
+
* XLSX 导出 Worker:sheet-core exportWorkbookXlsx(模型序列化 + ZIP 压缩,
|
|
4
4
|
* 大工作簿为秒级同步重活)移到独立线程,主线程保持空闲。
|
|
5
5
|
*
|
|
6
6
|
* 协议:主线程 postMessage({ sheets: [{ name, snapshot }], activeIndex })
|
|
@@ -36,7 +36,7 @@ self.onmessage = (e: MessageEvent<ExportWorkerPayload>): void => {
|
|
|
36
36
|
for (let i = 0; i < sheets.length; i++) {
|
|
37
37
|
const { name, snapshot } = sheets[i]!
|
|
38
38
|
// 首个 sheet 复用 Workbook 自带的默认表:先改名对齐(空名/重名保持原名,
|
|
39
|
-
// 导出侧
|
|
39
|
+
// 导出侧 sheet-core 的 writeXlsx 会校验表名合法性)
|
|
40
40
|
const sheet = i === 0 ? wb.activeSheet : wb.addSheet(name)
|
|
41
41
|
if (i === 0 && sheet.name !== name) wb.renameSheet(sheet.name, name)
|
|
42
42
|
sheet.restore(snapshot)
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import type { Workbook } from '@veltra/sheet-core/core/workbook'
|
|
2
2
|
import type { DeconstructValue } from '@veltra/utils'
|
|
3
3
|
|
|
4
|
-
import type {
|
|
4
|
+
import type {
|
|
5
|
+
DataConnection,
|
|
6
|
+
DataConnector,
|
|
7
|
+
ReportTemplate,
|
|
8
|
+
ReportTemplateListItem,
|
|
9
|
+
ResolveReportTemplate
|
|
10
|
+
} from '../report'
|
|
5
11
|
|
|
6
12
|
/** 报表设计器组件属性(ADR-0003 决策 2) */
|
|
7
13
|
export interface ReportDesignerProps {
|
|
@@ -19,6 +25,17 @@ export interface ReportDesignerProps {
|
|
|
19
25
|
template?: ReportTemplate
|
|
20
26
|
/** 承载设计态的工作簿(USheet 先例:缺省内部自建单 sheet 工作簿) */
|
|
21
27
|
workbook?: Workbook
|
|
28
|
+
/**
|
|
29
|
+
* 宿主提供的可下钻目标模板列表(ref + 可读名):
|
|
30
|
+
* 传入后绑定格 Action Pill 出现下钻配置入口(目标仅从列表选择,不支持手填引用);不传则无入口
|
|
31
|
+
*/
|
|
32
|
+
drillTemplates?: ReportTemplateListItem[]
|
|
33
|
+
/**
|
|
34
|
+
* 宿主模板解析契约(按下钻 target 引用取回目标模板,失败抛错):
|
|
35
|
+
* 下钻配置对话框据此解析目标模板的查询参数(字段→参数映射);
|
|
36
|
+
* 预览模式原样转发给内嵌 UReportViewer,使预览内可下钻(含 switch / dialog)与逐级回退
|
|
37
|
+
*/
|
|
38
|
+
resolveTemplate?: ResolveReportTemplate
|
|
22
39
|
}
|
|
23
40
|
|
|
24
41
|
/** 报表设计器组件定义的事件 */
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { Workbook } from '@veltra/sheet-core/core/workbook'
|
|
2
2
|
import type { DeconstructValue } from '@veltra/utils'
|
|
3
3
|
|
|
4
|
-
import type { DataConnector, ReportTemplate } from '../report'
|
|
4
|
+
import type { DataConnector, ParamValues, ReportTemplate, ResolveReportTemplate } from '../report'
|
|
5
5
|
import type { ReportColWidthEntry } from '../report/export-xlsx'
|
|
6
|
+
import type { ReportPrintOptions } from '../report/print'
|
|
6
7
|
|
|
7
8
|
/** 报表查看器组件属性(ADR-0003 决策 2) */
|
|
8
9
|
export interface ReportViewerProps {
|
|
@@ -20,6 +21,17 @@ export interface ReportViewerProps {
|
|
|
20
21
|
* 列宽已进 `SheetSnapshot.colWidths`,通常无需再传。
|
|
21
22
|
*/
|
|
22
23
|
colWidths?: ReadonlyArray<ReportColWidthEntry>
|
|
24
|
+
/**
|
|
25
|
+
* 下钻目标模板解析契约(可选,内核共享类型):单击配了下钻的绑定格时按 `target` 引用取目标模板。
|
|
26
|
+
* 解析失败(抛错 / reject,或宿主实现返回空值)时查看器给出可读提示并停留当前报。
|
|
27
|
+
* 缺省时下钻不生效(无点击行为与可点视觉提示)。
|
|
28
|
+
*/
|
|
29
|
+
resolveTemplate?: ResolveReportTemplate
|
|
30
|
+
/**
|
|
31
|
+
* Filter Bar 初值(可选):与当前模板参数默认值合并,显式键覆盖默认值。
|
|
32
|
+
* 仅在根模板载入时播种(下钻弹框传入映射参数);缺省则只用参数默认值。
|
|
33
|
+
*/
|
|
34
|
+
initialValues?: ParamValues
|
|
23
35
|
}
|
|
24
36
|
|
|
25
37
|
/** 在组件内部引用 */
|
|
@@ -31,6 +43,11 @@ export interface _ReportViewerExposed {
|
|
|
31
43
|
* 不内置导出按钮,工具栏由下游决定。
|
|
32
44
|
*/
|
|
33
45
|
exportXlsx: () => Promise<void>
|
|
46
|
+
/**
|
|
47
|
+
* 打印填充报表(纯前端:模型 → 打印 HTML → 隐藏 iframe 调起浏览器打印;
|
|
48
|
+
* 取数完成前拒绝)。不内置打印按钮,工具栏由下游决定。
|
|
49
|
+
*/
|
|
50
|
+
print: (options?: ReportPrintOptions) => void
|
|
34
51
|
}
|
|
35
52
|
|
|
36
53
|
/** 报表查看器组件暴露的方法 */
|