静态表格 stable
约 1139 字大约 4 分钟
...
2026-09-28
插件说明
@sv-print/plugin-ele-stable 静态表格元素插件：点击「设计」按钮弹窗，可视化 DIY 拖拽设计表格。基于 div + CSS Grid 实现（非 table 标签），整表渲染、不分页。
核心能力：
- 拖拽框选多个单元格，可合并 / 拆分单元格
- 单元格右键可插入 文本 / 图片 / 条形码 / 二维码 / HTML
- 通过
customTypes参数扩展，可插入自定义 div - 文本 / 二维码 / 自定义内容均支持
#{field}占位符，打印时替换为绑定数据
第三方依赖：jsbarcode（条形码 / 二维码单元格）。
npm install @sv-print/plugin-ele-stable示例代码
import pluginEleStable from '@sv-print/plugin-ele-stable';
const plugins = [
pluginEleStable({
showDesign: true, // 是否显示"设计"按钮, 默认 true
styleOptions: {
defaultCellHeight: 30, // 默认单元格高度(px), 默认 30
defaultCellWidth: 80, // 默认单元格宽度(px), 默认 80
},
// 自定义"设计"按钮点击逻辑(提供后不再弹出内置设计器)
// onDesignClick: (json, callback) => {
// console.log(json); // 当前表格 json 字符串
// callback(json); // 处理完后回调新的 json 字符串
// },
// 插入数据前的回调: 自定义/编辑要插入的内容(可异步)
// done(内容) 使用该内容; done() 不传 -> 回落内置默认行为
onInsert: (ctx, done) => {
// ctx: { type, cell, defaultContent }
if (ctx.type === 'image') {
const url = window.prompt('请输入图片地址', ctx.defaultContent);
done(url == null ? undefined : url);
} else {
done();
}
},
// 扩展: 自定义单元格类型(插入自定义 div)
customTypes: [
{
type: 'signature', // 类型标识(唯一)
label: '签名区', // 右键菜单/属性面板显示名称
defaultContent: '签字:', // 新建默认内容
render: (cell, ctx) => {
// 返回单元格内部 html 字符串
// cell.content 为单元格内容; ctx.templateData 为打印数据; ctx.design 是否设计态
return `<div style="width:100%;"><div>${cell.content || ''}</div><div style="display:inline-block;border-bottom:1px solid #000;min-width:80px;height:2px;"></div></div>`;
},
},
],
}),
];
await hiprint.register({ plugins }); // 须在创建模板/打开设计器之前拖出「静态表格」元素，选中后在右侧参数面板点击「设计」即可弹窗设计。设计器操作：
- 调整行列：工具栏输入行/列数量后点击「应用行列」
- 框选：在网格上按住鼠标拖动框选多个单元格；框选后可合并 / 拆分
- 调整行高/列宽：鼠标移到单元格边线上，按住拖动
- 插入内容：右键单元格 → 插入文本 / 图片 / 条形码 / 二维码 / HTML / 自定义类型
- 编辑属性：选中单元格后在右侧面板编辑内容、对齐、字号、颜色、背景等
- 边框（Excel 式）：工具栏设置整表默认边框；框选后右键 → 边框，可设全边框 / 外边框 / 上 / 下 / 左 / 右 / 上下 / 左右 / 无边框 / 清除
高级用法
数据结构（stableTable）
保存的表格 JSON 存于元素参数 stableTable：
{
"rows": 3,
"cols": 3,
"colWidths": [80, 80, 80], // 各列宽度(比例, fr); 网格按比例填满元素框
"rowHeights": [30, 30, 30], // 各行高度(比例, fr); 网格按比例填满元素框
"borderWidth": 1,
"borderColor": "#000000",
"cells": {
"0_0": {
"r": 0,
"c": 0,
"rowspan": 1,
"colspan": 1,
"merged": false, // 是否被合并隐藏
"type": "text", // text | image | barcode | qrcode | html | custom:<type>
"content": "#{name}", // 支持 #{field} 占位符
"style": { "textAlign": "center", "verticalAlign": "middle" },
},
},
}表格总尺寸由元素框宽高决定，网格按
colWidths/rowHeights比例（fr）填满元素框；设计保存后元素框宽高同步为表格尺寸，手动拖拽调整元素宽高时表格按比例自动重排。
插件 config
| 参数 | 说明 |
|---|---|
showDesign | 是否显示「设计」按钮，默认 true |
onDesignClick(json, callback) | 自定义设计入口，处理后回调新的表格 json |
designerOptions | 弹窗设计器配置（如 title） |
customTypes | 自定义单元格类型 {type, label, defaultContent?, render?}[] |
styleOptions | 样式配置 {defaultCellHeight, defaultCellWidth} |
onInsert(ctx, done) | 插入内容前回调，可异步自定义要插入的内容 |
版权所有
版权归属：sv-print