@worm-vue3-print/core 1.0.1 → 1.1.0

package/dist/index.cjs

@@ -931,6 +931,9 @@ function makeRenderRow(row, resolve, keepRaw = false) {
       barcodeType: cell.barcodeType,
       qrCodeLevel: cell.qrCodeLevel,
       showBarcodeText: cell.showBarcodeText,
+      fit: cell.fit,
+      maxWidth: cell.maxWidth,
+      maxHeight: cell.maxHeight,
       rowspan: cell.rowspan ?? 1,
       colspan: cell.colspan ?? 1,
       merged: cell.merged === true,
@@ -997,6 +1000,10 @@ function buildPageCss(template) {
 
 /* \u2500\u2500 \u5168\u5C40\u91CD\u7F6E \u2500\u2500 */
 * { margin: 0; padding: 0; box-sizing: border-box; }
+
+/* \u6253\u5370\u5FC5\u987B\u4FDD\u7559\u5143\u7D20\u80CC\u666F\u8272\uFF08Chromium \u9ED8\u8BA4\u5254\u9664\u80CC\u666F\uFF0C\u9700\u663E\u5F0F\u58F0\u660E\uFF09 */
+* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
 body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
 
 /* \u2500\u2500 \u5C4F\u5E55\u9884\u89C8\uFF1A\u7070\u5E95 + \u7EB8\u5F20\u9634\u5F71/\u9875\u95F4\u8DDD\uFF1B\u6253\u5370\u65F6\u53BB\u9664 \u2500\u2500 */
@@ -1013,6 +1020,7 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
 .print-page {
   width: ${mm(paper.width)};
   min-height: ${mm(paper.height)};
+  background: ${template.pageBackground ?? "#fff"};
   padding: ${mm(mt)} ${mm(mr)} ${mm(mb)} ${mm(ml)};
   position: relative;
   page-break-after: always;
@@ -1029,12 +1037,14 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
   position: relative;
 }
 
-/* \u2500\u2500 \u9875\u811A\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8\uFF08\u5185\u5BB9\u4E0D\u8DB3\u65F6\u4E0D\u968F\u6587\u6863\u6D41\u4E0A\u6D6E\uFF09 \u2500\u2500 */
+/* \u2500\u2500 \u9875\u811A\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8\uFF08\u5185\u5BB9\u4E0D\u8DB3\u65F6\u4E0D\u968F\u6587\u6863\u6D41\u4E0A\u6D6E\uFF09 \u2500\u2500
+   \u7528\u663E\u5F0F top \u5B9A\u4F4D\u5230\u300C\u7EB8\u9AD8 - \u4E0B\u8FB9\u8DDD - \u9875\u811A\u9AD8\u300D\uFF0C\u4FDD\u8BC1\u4E0B\u8FB9\u8DDD\u751F\u6548\u3001
+   \u4E0E\u8BBE\u8BA1\u5668 CanvasPaper \u7684\u4E09\u533A\u51E0\u4F55\u4E00\u81F4\u3002 */
 .page-footer {
   width: ${mm(contentWidth)};
   height: ${mm(footerH)};
   position: absolute;
-  bottom: 0;
+  top: ${mm(paper.height - mb - footerH)};
   left: 0;
 }
 
@@ -1088,7 +1098,7 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
 }
 `.trim();
 }
-function elementPositionStyle(left, top, width, height) {
+function elementPositionStyle(left, top, width, height, zIndex) {
   const parts = [
     `position:absolute`,
     `left:${mm(left)}`,
@@ -1098,6 +1108,9 @@ function elementPositionStyle(left, top, width, height) {
   if (height !== void 0 && height > 0) {
     parts.push(`height:${mm(height)}`);
   }
+  if (zIndex !== void 0) {
+    parts.push(`z-index:${zIndex}`);
+  }
   return parts.join(";") + ";";
 }
 
@@ -1139,18 +1152,15 @@ function buildFollowMap(sorted) {
   }
   return map;
 }
-function followGroupHeight(el, members, template, measuredElements) {
-  let cursorBottom = tableDesignBottom(el);
-  let total = 0;
+function followGroupHeight(el, members, template, _measuredElements) {
+  const tableBottom = tableDesignBottom(el);
+  let maxBottom = tableBottom;
   for (const id of members) {
     const m = template.elements.find((e) => e.id === id);
     if (!m) continue;
-    const mTop = m.options?.top ?? 0;
-    total += Math.max(mTop - cursorBottom, 0);
-    total += measuredElements.get(id)?.measuredHeight ?? m.options?.height ?? 0;
-    cursorBottom = mTop + (m.options?.height ?? 0);
+    maxBottom = Math.max(maxBottom, (m.options?.top ?? 0) + (m.options?.height ?? 0));
   }
-  return total;
+  return Math.max(maxBottom - tableBottom, 0);
 }
 function paginate(template, measuredElements) {
   const paper = getPaperDimensions(template);
@@ -1536,7 +1546,7 @@ function renderElement(el, isMeasure, containerStyle, overrideTop, ctx) {
   const top = overrideTop ?? opts.top ?? 0;
   const width = opts.width ?? 100;
   const height = opts.height ?? void 0;
-  const style = containerStyle ?? elementPositionStyle(left, top, width, height);
+  const style = containerStyle ?? elementPositionStyle(left, top, width, height, opts.zIndex);
   const measureAttr = isMeasure ? ` data-measure-id="${el.id}"` : "";
   const type = el.type || el.printElementType?.type || "text";
   switch (type) {
@@ -1570,7 +1580,7 @@ function renderElement(el, isMeasure, containerStyle, overrideTop, ctx) {
       return `<div class="print-element" style="${style}${textStyle(opts)}"${measureAttr}>${esc(opts.formatter ?? opts.testData ?? "")}</div>`;
   }
 }
-function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRenderer) {
+function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRenderer, fit, maxWidth, maxHeight) {
   if (!value || !codeRenderer) return fallbackHtml;
   try {
     const svg = codeRenderer.render(value, cellType, {
@@ -1581,7 +1591,22 @@ function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRend
       fontSize: typeof opts.fontSize === "number" ? opts.fontSize : void 0
     });
     const src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
-    const style = fill ? "width:100%;height:100%;object-fit:contain;display:block;margin:auto;" : "max-width:100%;max-height:100%;display:block;margin:auto;";
+    const styleParts = [];
+    if (fill) {
+      styleParts.push("width:100%", "height:100%", "object-fit:contain", "display:block", "margin:auto");
+    } else {
+      styleParts.push("max-width:100%", "max-height:100%", "display:block", "margin:auto");
+    }
+    if (fit) {
+      styleParts.push(`object-fit:${fit}`);
+    }
+    if (maxWidth) {
+      styleParts.push(`max-width:${maxWidth}mm`);
+    }
+    if (maxHeight) {
+      styleParts.push(`max-height:${maxHeight}mm`);
+    }
+    const style = styleParts.join(";");
     return `<img src="${src}" style="${style}" />`;
   } catch {
     return fallbackHtml;
@@ -1618,7 +1643,12 @@ function renderMatrixRows(renderRows, start, end, opts, withRowIndex, ctx) {
       let inner;
       if (cell.cellType === "barcode" || cell.cellType === "qrcode") {
         const cellFill = cell.cellType === "barcode";
-        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;">${codeImgHtml(cell.content, cell.cellType, cell, esc(cell.content), cellFill, ctx?.codeRenderer)}</div>`;
+        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;">${codeImgHtml(cell.content, cell.cellType, cell, esc(cell.content), cellFill, ctx?.codeRenderer, cell.fit, cell.maxWidth, cell.maxHeight)}</div>`;
+      } else if (cell.cellType === "image") {
+        const fit = cell.fit || "contain";
+        const maxWidth = cell.maxWidth ? `max-width:${cell.maxWidth}mm;` : "max-width:100%;";
+        const maxHeight = cell.maxHeight ? `max-height:${cell.maxHeight}mm;` : "max-height:100%;";
+        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;"><img src="${esc(cell.content)}" style="object-fit:${fit};${maxWidth}${maxHeight}display:block;" /></div>`;
       } else {
         inner = esc(cell.content);
       }
@@ -1640,7 +1670,7 @@ function matrixTableHtml(el, bodyHtml) {
 }
 function renderTableElement(el, isMeasure, measureAttr, ctx) {
   const opts = el.options;
-  const style = elementPositionStyle(opts.left ?? 0, opts.top ?? 0, opts.width ?? 100);
+  const style = elementPositionStyle(opts.left ?? 0, opts.top ?? 0, opts.width ?? 100, void 0, opts.zIndex);
   const renderRows = opts._renderRows ?? [];
   const bodyHtml = renderMatrixRows(renderRows, 0, renderRows.length, opts, isMeasure, ctx);
   return `<div class="print-element" style="${style};overflow:visible;"${measureAttr}>
@@ -1649,7 +1679,7 @@ function renderTableElement(el, isMeasure, measureAttr, ctx) {
 }
 function renderTableSlice(el, section, ctx) {
   const opts = el.options;
-  const style = elementPositionStyle(opts.left ?? 0, section.renderTop ?? opts.top ?? 0, opts.width ?? 100);
+  const style = elementPositionStyle(opts.left ?? 0, section.renderTop ?? opts.top ?? 0, opts.width ?? 100, void 0, opts.zIndex);
   const renderRows = opts._renderRows ?? [];
   const startRow = section.startRow ?? 0;
   const endRow = section.endRow ?? renderRows.length;
@@ -1691,7 +1721,9 @@ function renderFlowGroup(el, section, template, ctx) {
   const tableLeft = opts.left ?? 0;
   const tableWidth = opts.width ?? 100;
   const groupTop = section.groupTop ?? opts.top ?? 0;
-  const style = `position:absolute;left:${mm(tableLeft)};top:${mm(groupTop)};width:${mm(tableWidth)};overflow:visible;`;
+  const tableBottom = tableDesignBottom(el);
+  const zStyle = typeof opts.zIndex === "number" ? `z-index:${opts.zIndex};` : "";
+  const style = `position:absolute;left:${mm(tableLeft)};top:${mm(groupTop)};width:${mm(tableWidth)};overflow:visible;${zStyle}`;
   const startRow = section.startRow ?? 0;
   const endRow = section.endRow ?? 0;
   let sliceHtml = "";
@@ -1707,31 +1739,39 @@ function renderFlowGroup(el, section, template, ctx) {
 ${bodyHtml}${subtotalHtml}${summaryHtml}`)}
 </div>`;
   }
-  let cursorBottom = tableDesignBottom(el);
-  const followHtml = (section.followElementIds ?? []).map((id) => {
+  const followIds = section.followElementIds ?? [];
+  const followExtent = followIds.reduce((maxBottom, id) => {
+    const m = findElement(template, id);
+    if (!m) return maxBottom;
+    return Math.max(maxBottom, (m.options?.top ?? 0) + (m.options?.height ?? 0));
+  }, tableBottom);
+  const followHtml = followIds.map((id) => {
     const m = findElement(template, id);
     if (!m) return "";
     const mTop = m.options?.top ?? 0;
     const mLeft = m.options?.left ?? 0;
     const mWidth = m.options?.width ?? tableWidth;
     const mHeight = m.options?.height ?? 0;
-    const gap = Math.max(mTop - cursorBottom, 0);
-    cursorBottom = mTop + mHeight;
+    const mZ = m.options?.zIndex;
     const type = m.type || m.printElementType?.type || "text";
     const needsHeight = type === "rect" || type === "oval" || type === "image";
     const flowStyle = [
-      "position:relative",
+      "position:absolute",
       `left:${mm(mLeft - tableLeft)}`,
+      `top:${mm(mTop - tableBottom)}`,
       `width:${mm(mWidth)}`,
       ...needsHeight && mHeight > 0 ? [`height:${mm(mHeight)}`] : [],
-      `margin-top:${mm(gap)}`,
+      ...typeof mZ === "number" ? [`z-index:${mZ}`] : [],
       "overflow:visible"
     ].join(";") + ";";
     return renderElement(m, false, flowStyle, void 0, ctx);
   }).join("\n");
+  const followWrap = followIds.length > 0 ? `<div class="flow-follow" style="position:relative;width:${mm(tableWidth)};height:${mm(Math.max(followExtent - tableBottom, 0))};overflow:visible;">
+${followHtml}
+</div>` : "";
   return `<div class="flow-group" style="${style}">
 ${sliceHtml}
-${followHtml}
+${followWrap}
 </div>`;
 }
 function renderAreaElements(elements, _contentWidth, pageIndex, totalPages, ctx) {

package/dist/index.d.cts

@@ -139,6 +139,8 @@ interface TemplateData {
     customWidth?: number;
     /** 自定义纸张高度（mm），仅 paperSize='CUSTOM' 时生效 */
     customHeight?: number;
+    /** 页面（纸张）背景色；未设置时默认白色 */
+    pageBackground?: string;
     margins: {
         top: number;
         right: number;
@@ -206,7 +208,7 @@ interface RenderCell {
     content: string;
     /** 小计行专用：单元格原始 formatter 表达式，渲染阶段以当前页数据行上下文求值 */
     rawFormatter?: string;
-    /** 内容类型：text（默认）/ barcode / qrcode，非 text 时 content 为码值 */
+    /** 内容类型：text（默认）/ barcode / qrcode / image，非 text 时 content 为码值或图片 URL */
     cellType?: string;
     /** 条形码码制（jsbarcode 格式名），仅 cellType='barcode' 时生效 */
     barcodeType?: string;
@@ -214,6 +216,12 @@ interface RenderCell {
     qrCodeLevel?: string;
     /** 条形码下方是否显示文本，仅 cellType='barcode' 时生效 */
     showBarcodeText?: boolean;
+    /** 图片缩放模式，仅 cellType='image' 时生效 */
+    fit?: string;
+    /** 图片最大宽度（mm），仅 cellType='image' 时生效 */
+    maxWidth?: number;
+    /** 图片最大高度（mm），仅 cellType='image' 时生效 */
+    maxHeight?: number;
     rowspan: number;
     colspan: number;
     merged: boolean;
@@ -330,9 +338,10 @@ declare function mm(value: number): string;
  */
 declare function buildPageCss(template: TemplateData): string;
 /**
- * 生成内联样式：元素绝对定位（mm 单位）
+ * 生成内联样式：元素绝对定位（mm 单位）。
+ * 可选 z-index：与设计器「层级」一致，未设置（undefined）时不输出（层叠回退 DOM 顺序）。
  */
-declare function elementPositionStyle(left: number, top: number, width: number, height?: number): string;
+declare function elementPositionStyle(left: number, top: number, width: number, height?: number, zIndex?: number): string;
 
 /**
  * 表格设计底部（mm）= 设计 top + 设计高度。

package/dist/index.d.ts

@@ -139,6 +139,8 @@ interface TemplateData {
     customWidth?: number;
     /** 自定义纸张高度（mm），仅 paperSize='CUSTOM' 时生效 */
     customHeight?: number;
+    /** 页面（纸张）背景色；未设置时默认白色 */
+    pageBackground?: string;
     margins: {
         top: number;
         right: number;
@@ -206,7 +208,7 @@ interface RenderCell {
     content: string;
     /** 小计行专用：单元格原始 formatter 表达式，渲染阶段以当前页数据行上下文求值 */
     rawFormatter?: string;
-    /** 内容类型：text（默认）/ barcode / qrcode，非 text 时 content 为码值 */
+    /** 内容类型：text（默认）/ barcode / qrcode / image，非 text 时 content 为码值或图片 URL */
     cellType?: string;
     /** 条形码码制（jsbarcode 格式名），仅 cellType='barcode' 时生效 */
     barcodeType?: string;
@@ -214,6 +216,12 @@ interface RenderCell {
     qrCodeLevel?: string;
     /** 条形码下方是否显示文本，仅 cellType='barcode' 时生效 */
     showBarcodeText?: boolean;
+    /** 图片缩放模式，仅 cellType='image' 时生效 */
+    fit?: string;
+    /** 图片最大宽度（mm），仅 cellType='image' 时生效 */
+    maxWidth?: number;
+    /** 图片最大高度（mm），仅 cellType='image' 时生效 */
+    maxHeight?: number;
     rowspan: number;
     colspan: number;
     merged: boolean;
@@ -330,9 +338,10 @@ declare function mm(value: number): string;
  */
 declare function buildPageCss(template: TemplateData): string;
 /**
- * 生成内联样式：元素绝对定位（mm 单位）
+ * 生成内联样式：元素绝对定位（mm 单位）。
+ * 可选 z-index：与设计器「层级」一致，未设置（undefined）时不输出（层叠回退 DOM 顺序）。
  */
-declare function elementPositionStyle(left: number, top: number, width: number, height?: number): string;
+declare function elementPositionStyle(left: number, top: number, width: number, height?: number, zIndex?: number): string;
 
 /**
  * 表格设计底部（mm）= 设计 top + 设计高度。

package/dist/index.js

@@ -874,6 +874,9 @@ function makeRenderRow(row, resolve, keepRaw = false) {
       barcodeType: cell.barcodeType,
       qrCodeLevel: cell.qrCodeLevel,
       showBarcodeText: cell.showBarcodeText,
+      fit: cell.fit,
+      maxWidth: cell.maxWidth,
+      maxHeight: cell.maxHeight,
       rowspan: cell.rowspan ?? 1,
       colspan: cell.colspan ?? 1,
       merged: cell.merged === true,
@@ -940,6 +943,10 @@ function buildPageCss(template) {
 
 /* \u2500\u2500 \u5168\u5C40\u91CD\u7F6E \u2500\u2500 */
 * { margin: 0; padding: 0; box-sizing: border-box; }
+
+/* \u6253\u5370\u5FC5\u987B\u4FDD\u7559\u5143\u7D20\u80CC\u666F\u8272\uFF08Chromium \u9ED8\u8BA4\u5254\u9664\u80CC\u666F\uFF0C\u9700\u663E\u5F0F\u58F0\u660E\uFF09 */
+* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
 body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
 
 /* \u2500\u2500 \u5C4F\u5E55\u9884\u89C8\uFF1A\u7070\u5E95 + \u7EB8\u5F20\u9634\u5F71/\u9875\u95F4\u8DDD\uFF1B\u6253\u5370\u65F6\u53BB\u9664 \u2500\u2500 */
@@ -956,6 +963,7 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
 .print-page {
   width: ${mm(paper.width)};
   min-height: ${mm(paper.height)};
+  background: ${template.pageBackground ?? "#fff"};
   padding: ${mm(mt)} ${mm(mr)} ${mm(mb)} ${mm(ml)};
   position: relative;
   page-break-after: always;
@@ -972,12 +980,14 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
   position: relative;
 }
 
-/* \u2500\u2500 \u9875\u811A\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8\uFF08\u5185\u5BB9\u4E0D\u8DB3\u65F6\u4E0D\u968F\u6587\u6863\u6D41\u4E0A\u6D6E\uFF09 \u2500\u2500 */
+/* \u2500\u2500 \u9875\u811A\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8\uFF08\u5185\u5BB9\u4E0D\u8DB3\u65F6\u4E0D\u968F\u6587\u6863\u6D41\u4E0A\u6D6E\uFF09 \u2500\u2500
+   \u7528\u663E\u5F0F top \u5B9A\u4F4D\u5230\u300C\u7EB8\u9AD8 - \u4E0B\u8FB9\u8DDD - \u9875\u811A\u9AD8\u300D\uFF0C\u4FDD\u8BC1\u4E0B\u8FB9\u8DDD\u751F\u6548\u3001
+   \u4E0E\u8BBE\u8BA1\u5668 CanvasPaper \u7684\u4E09\u533A\u51E0\u4F55\u4E00\u81F4\u3002 */
 .page-footer {
   width: ${mm(contentWidth)};
   height: ${mm(footerH)};
   position: absolute;
-  bottom: 0;
+  top: ${mm(paper.height - mb - footerH)};
   left: 0;
 }
 
@@ -1031,7 +1041,7 @@ body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, s
 }
 `.trim();
 }
-function elementPositionStyle(left, top, width, height) {
+function elementPositionStyle(left, top, width, height, zIndex) {
   const parts = [
     `position:absolute`,
     `left:${mm(left)}`,
@@ -1041,6 +1051,9 @@ function elementPositionStyle(left, top, width, height) {
   if (height !== void 0 && height > 0) {
     parts.push(`height:${mm(height)}`);
   }
+  if (zIndex !== void 0) {
+    parts.push(`z-index:${zIndex}`);
+  }
   return parts.join(";") + ";";
 }
 
@@ -1082,18 +1095,15 @@ function buildFollowMap(sorted) {
   }
   return map;
 }
-function followGroupHeight(el, members, template, measuredElements) {
-  let cursorBottom = tableDesignBottom(el);
-  let total = 0;
+function followGroupHeight(el, members, template, _measuredElements) {
+  const tableBottom = tableDesignBottom(el);
+  let maxBottom = tableBottom;
   for (const id of members) {
     const m = template.elements.find((e) => e.id === id);
     if (!m) continue;
-    const mTop = m.options?.top ?? 0;
-    total += Math.max(mTop - cursorBottom, 0);
-    total += measuredElements.get(id)?.measuredHeight ?? m.options?.height ?? 0;
-    cursorBottom = mTop + (m.options?.height ?? 0);
+    maxBottom = Math.max(maxBottom, (m.options?.top ?? 0) + (m.options?.height ?? 0));
   }
-  return total;
+  return Math.max(maxBottom - tableBottom, 0);
 }
 function paginate(template, measuredElements) {
   const paper = getPaperDimensions(template);
@@ -1479,7 +1489,7 @@ function renderElement(el, isMeasure, containerStyle, overrideTop, ctx) {
   const top = overrideTop ?? opts.top ?? 0;
   const width = opts.width ?? 100;
   const height = opts.height ?? void 0;
-  const style = containerStyle ?? elementPositionStyle(left, top, width, height);
+  const style = containerStyle ?? elementPositionStyle(left, top, width, height, opts.zIndex);
   const measureAttr = isMeasure ? ` data-measure-id="${el.id}"` : "";
   const type = el.type || el.printElementType?.type || "text";
   switch (type) {
@@ -1513,7 +1523,7 @@ function renderElement(el, isMeasure, containerStyle, overrideTop, ctx) {
       return `<div class="print-element" style="${style}${textStyle(opts)}"${measureAttr}>${esc(opts.formatter ?? opts.testData ?? "")}</div>`;
   }
 }
-function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRenderer) {
+function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRenderer, fit, maxWidth, maxHeight) {
   if (!value || !codeRenderer) return fallbackHtml;
   try {
     const svg = codeRenderer.render(value, cellType, {
@@ -1524,7 +1534,22 @@ function codeImgHtml(value, cellType, opts, fallbackHtml, fill = false, codeRend
       fontSize: typeof opts.fontSize === "number" ? opts.fontSize : void 0
     });
     const src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
-    const style = fill ? "width:100%;height:100%;object-fit:contain;display:block;margin:auto;" : "max-width:100%;max-height:100%;display:block;margin:auto;";
+    const styleParts = [];
+    if (fill) {
+      styleParts.push("width:100%", "height:100%", "object-fit:contain", "display:block", "margin:auto");
+    } else {
+      styleParts.push("max-width:100%", "max-height:100%", "display:block", "margin:auto");
+    }
+    if (fit) {
+      styleParts.push(`object-fit:${fit}`);
+    }
+    if (maxWidth) {
+      styleParts.push(`max-width:${maxWidth}mm`);
+    }
+    if (maxHeight) {
+      styleParts.push(`max-height:${maxHeight}mm`);
+    }
+    const style = styleParts.join(";");
     return `<img src="${src}" style="${style}" />`;
   } catch {
     return fallbackHtml;
@@ -1561,7 +1586,12 @@ function renderMatrixRows(renderRows, start, end, opts, withRowIndex, ctx) {
       let inner;
       if (cell.cellType === "barcode" || cell.cellType === "qrcode") {
         const cellFill = cell.cellType === "barcode";
-        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;">${codeImgHtml(cell.content, cell.cellType, cell, esc(cell.content), cellFill, ctx?.codeRenderer)}</div>`;
+        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;">${codeImgHtml(cell.content, cell.cellType, cell, esc(cell.content), cellFill, ctx?.codeRenderer, cell.fit, cell.maxWidth, cell.maxHeight)}</div>`;
+      } else if (cell.cellType === "image") {
+        const fit = cell.fit || "contain";
+        const maxWidth = cell.maxWidth ? `max-width:${cell.maxWidth}mm;` : "max-width:100%;";
+        const maxHeight = cell.maxHeight ? `max-height:${cell.maxHeight}mm;` : "max-height:100%;";
+        inner = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;"><img src="${esc(cell.content)}" style="object-fit:${fit};${maxWidth}${maxHeight}display:block;" /></div>`;
       } else {
         inner = esc(cell.content);
       }
@@ -1583,7 +1613,7 @@ function matrixTableHtml(el, bodyHtml) {
 }
 function renderTableElement(el, isMeasure, measureAttr, ctx) {
   const opts = el.options;
-  const style = elementPositionStyle(opts.left ?? 0, opts.top ?? 0, opts.width ?? 100);
+  const style = elementPositionStyle(opts.left ?? 0, opts.top ?? 0, opts.width ?? 100, void 0, opts.zIndex);
   const renderRows = opts._renderRows ?? [];
   const bodyHtml = renderMatrixRows(renderRows, 0, renderRows.length, opts, isMeasure, ctx);
   return `<div class="print-element" style="${style};overflow:visible;"${measureAttr}>
@@ -1592,7 +1622,7 @@ function renderTableElement(el, isMeasure, measureAttr, ctx) {
 }
 function renderTableSlice(el, section, ctx) {
   const opts = el.options;
-  const style = elementPositionStyle(opts.left ?? 0, section.renderTop ?? opts.top ?? 0, opts.width ?? 100);
+  const style = elementPositionStyle(opts.left ?? 0, section.renderTop ?? opts.top ?? 0, opts.width ?? 100, void 0, opts.zIndex);
   const renderRows = opts._renderRows ?? [];
   const startRow = section.startRow ?? 0;
   const endRow = section.endRow ?? renderRows.length;
@@ -1634,7 +1664,9 @@ function renderFlowGroup(el, section, template, ctx) {
   const tableLeft = opts.left ?? 0;
   const tableWidth = opts.width ?? 100;
   const groupTop = section.groupTop ?? opts.top ?? 0;
-  const style = `position:absolute;left:${mm(tableLeft)};top:${mm(groupTop)};width:${mm(tableWidth)};overflow:visible;`;
+  const tableBottom = tableDesignBottom(el);
+  const zStyle = typeof opts.zIndex === "number" ? `z-index:${opts.zIndex};` : "";
+  const style = `position:absolute;left:${mm(tableLeft)};top:${mm(groupTop)};width:${mm(tableWidth)};overflow:visible;${zStyle}`;
   const startRow = section.startRow ?? 0;
   const endRow = section.endRow ?? 0;
   let sliceHtml = "";
@@ -1650,31 +1682,39 @@ function renderFlowGroup(el, section, template, ctx) {
 ${bodyHtml}${subtotalHtml}${summaryHtml}`)}
 </div>`;
   }
-  let cursorBottom = tableDesignBottom(el);
-  const followHtml = (section.followElementIds ?? []).map((id) => {
+  const followIds = section.followElementIds ?? [];
+  const followExtent = followIds.reduce((maxBottom, id) => {
+    const m = findElement(template, id);
+    if (!m) return maxBottom;
+    return Math.max(maxBottom, (m.options?.top ?? 0) + (m.options?.height ?? 0));
+  }, tableBottom);
+  const followHtml = followIds.map((id) => {
     const m = findElement(template, id);
     if (!m) return "";
     const mTop = m.options?.top ?? 0;
     const mLeft = m.options?.left ?? 0;
     const mWidth = m.options?.width ?? tableWidth;
     const mHeight = m.options?.height ?? 0;
-    const gap = Math.max(mTop - cursorBottom, 0);
-    cursorBottom = mTop + mHeight;
+    const mZ = m.options?.zIndex;
     const type = m.type || m.printElementType?.type || "text";
     const needsHeight = type === "rect" || type === "oval" || type === "image";
     const flowStyle = [
-      "position:relative",
+      "position:absolute",
       `left:${mm(mLeft - tableLeft)}`,
+      `top:${mm(mTop - tableBottom)}`,
       `width:${mm(mWidth)}`,
       ...needsHeight && mHeight > 0 ? [`height:${mm(mHeight)}`] : [],
-      `margin-top:${mm(gap)}`,
+      ...typeof mZ === "number" ? [`z-index:${mZ}`] : [],
       "overflow:visible"
     ].join(";") + ";";
     return renderElement(m, false, flowStyle, void 0, ctx);
   }).join("\n");
+  const followWrap = followIds.length > 0 ? `<div class="flow-follow" style="position:relative;width:${mm(tableWidth)};height:${mm(Math.max(followExtent - tableBottom, 0))};overflow:visible;">
+${followHtml}
+</div>` : "";
   return `<div class="flow-group" style="${style}">
 ${sliceHtml}
-${followHtml}
+${followWrap}
 </div>`;
 }
 function renderAreaElements(elements, _contentWidth, pageIndex, totalPages, ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worm-vue3-print/core",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "打印模板表达式引擎与同构渲染管线（HTML 生成/分页/数据绑定），无 Vue、无宿主依赖",
   "main": "dist/index.cjs",