@sv-print/plugin-ele-stable

静态表格元素插件：点击「设计」按钮弹窗，可视化 DIY 拖拽设计表格。

• 用 div (CSS Grid) 实现，而非 table 标签
• 拖拽框选多个单元格，可 合并 / 拆分单元格
• 单元格 右键 可插入 文本 / 图片 / 条形码 / 二维码 / HTML
• 通过 customTypes 参数扩展，可插入 自定义 div

安装

npm install @sv-print/plugin-ele-stable

使用

import pluginEleStable from "@sv-print/plugin-ele-stable";

const plugins = [
  pluginEleStable({
    // showDesign: false, // 是否显示"设计"按钮, 默认 true

    // 样式相关配置(后续更多样式参数也统一放这里)
    styleOptions: {
      defaultCellHeight: 30, // 默认单元格高度(px), 默认 30
      defaultCellWidth: 80, // 默认单元格宽度(px), 默认 80
    },
    // 自定义"设计"按钮点击逻辑(提供后不再弹出内置设计器)
    // onDesignClick: (json, callback) => {
    //   console.log(json); // 当前表格 json 字符串
    //   callback(json);    // 处理完后回调新的 json 字符串
    // },

    // 弹窗设计器配置
    // designerOptions: { title: "表格设计" },

    // 插入数据前的回调: 自定义/编辑要插入的内容(可异步)
    // done(内容) -> 使用该内容; done() 不传 -> 回落到内置默认行为(prompt 等)
    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>`;
        },
      },
    ],
  }),
];

在设计器左侧「插件」分组中拖出「静态表格」元素，选中后在右侧参数面板点击「设计」即可弹窗设计。

设计器操作

• 调整行列：工具栏输入行/列数量后点击「应用行列」
• 框选：在网格上按住鼠标拖动，框选多个单元格
• 合并 / 拆分：框选后点击工具栏按钮，或右键菜单操作
• 调整行高/列宽：将鼠标移到单元格边线上，出现调整光标后按住拖动
• 插入内容：右键单元格 → 插入文本 / 图片 / 条形码 / 二维码 / HTML / 自定义类型
• 编辑属性：选中单元格后在右侧面板编辑内容、对齐、字号、颜色、背景等
• 边框（Excel 式）：工具栏「表格边框」设置整表默认边框；框选单元格后 右键 → 边框，设置线宽/颜色后选择 全边框 / 外边框 / 上 / 下 / 左 / 右 / 上下 / 左右 / 无边框 / 清除设置（作用于所选区域）

数据结构

保存的 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",
        "borderWidth": 2,
        "borderColor": "#f00"
      }
    }
  }
}

文本 / 二维码 / 自定义内容均支持 #{field} 占位符，打印时用绑定数据替换。

表格总尺寸由元素框宽高决定，网格用 fr 按 colWidths / rowHeights 的比例填满元素框。

• 打开设计器时，网格默认以当前元素的宽高作为初始尺寸；
• 设计完成保存后，元素框宽高会同步为设计的表格尺寸（各列宽之和 / 各行高之和）；
• 之后手动拖拽调整元素宽高时，表格会按比例自动重排。

License

LGPL

开源使用须知

1.请自觉遵守 LGPL 协议，其他用途可联系作者；

2.允许用于个人学习、毕业设计、教学案例、公益事业、商业使用；

3.如果商用必须保留版权信息，请自觉遵守；

4.禁止将本开源的代码和资源进行任何形式任何名义的出售，否则产生的一切任何后果责任由侵权者自负；

5.商用请仔细审查代码和漏洞，不得用于任一国家许可范围之外的商业应用，产生的一切任何后果责任自负；